如何在Angular2中实现material lite步进器

更新：基本上没有应用材质样式。我尝试了切换和滑块，但不起作用

我有一个使用CLI创建的angular2项目，我正在使用material lite进行造型

在我的项目中添加和使用mdl stepper的正确方法是什么

我按照这里的说明（）操作，但我的步进器组件无法加载，如演示中所示

我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import { MDL } from './MaterialDesignLiteUpgradeElement';
import 'hammerjs';


import { HomeComponent } from './components/home/home.component'

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    MDL
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot(),

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在my styles.css中，我有：

@import '~material-design-lite/dist/material.blue-deep_orange.min.css';
@import '~mdl-stepper/stepper.css';
@import 'https://fonts.googleapis.com/icon?family=Material+Icons' 

在angular-cli.json中，我有：

"scripts": [
        "../node_modules/material-design-lite/material.min.js",
        "../node_modules/mdl-stepper/stepper.min.js"
      ],

HTML如下所示：

<ul class="mdl-stepper mdl-stepper--horizontal" id="demo-stepper-nonlinear">
    <li class="mdl-step">
        <span class="mdl-step__label">
            <span class="mdl-step__title">
                <span class="mdl-step__title-text">Core goal</span>
                <span class="mdl-step__title-message">Summarize if needed</span>
            </span>
        </span>
        <div class="mdl-step__content">
            <h2>sample 1</h2>
        </div>
        <div class="mdl-step__actions">
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
                Continue
            </button>
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
                Cancel
            </button>
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-back disabled>
                Back
            </button>
        </div>
    </li>
    <li class="mdl-step">
        <span class="mdl-step__label">
            <span class="mdl-step__title">
                <span class="mdl-step__title-text">Images</span>
                <span class="mdl-step__title-message">Summarize if needed</span>
            </span>
        </span>
        <div class="mdl-step__content">
            <h2>Sample 2</h2>
        </div>
        <div class="mdl-step__actions">
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
                Continue
            </button>
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
                Cancel
            </button>
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-back>
                Back
            </button>
        </div>
    </li>
    <li class="mdl-step">
        <span class="mdl-step__label">
            <span class="mdl-step__title">
                <span class="mdl-step__title-text">Sub goals</span>
                <span class="mdl-step__title-message">Summarize if needed</span>
            </span>
        </span>
        <div class="mdl-step__content">
            <h2>Sample 3</h2>
        </div>
        <div class="mdl-step__actions">
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
                Continue
            </button>
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
                Cancel
            </button>
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-back>
                Back
            </button>
        </div>
    </li>
</ul>

核心目标
如果需要，总结一下
样本1
继续
取消
返回


图像
如果需要，总结一下
样本2
继续
取消
返回


次级目标
如果需要，总结一下
样本3
继续
取消
返回

更新：如果我从styles.css中删除stepper.css，则结果如下所示：

使用stepper.css：（按钮和内容消失）

---

我的整个

元素位于一个具有

*ngIf

约束的div中。令人窒息的是，当我去掉这个限制时，我的步进器开始看起来正确了。我不知道为什么

我的整个

元素位于一个具有

*ngIf

约束的div中。令人窒息的是，当我去掉这个限制时，我的步进器开始看起来正确了。我不知道为什么

尝试在index.htmlb2中添加样式，但angular2 cli版本希望将它们添加到styles.css文件中，这是一个很好的做法，不是吗？是的，您可以添加到angularcli.json中，但只是为了调试，我尝试过，而对于stepper css，它会给出404错误-

GEThttp://localhost:4200/node_modules/mdl-stepper/stepper.min.css

。在我的index.htmlTry中，要在index.htmlbr中添加样式，angular2 cli版本希望将它们添加到styles.css文件中，这是一个很好的做法，不是吗？是的，您可以添加到angularcli.json，但只是为了调试，我尝试过，对于stepper css，它会给我404错误-

GEThttp://localhost:4200/node_modules/mdl-stepper/stepper.min.css

。在my index.html中