如何使用带角度的物化步进器答案

【问题标题】：how to use materialize-stepper with angular如何使用带角度的物化步进器
【发布时间】：2019-06-24 13:49:40
【问题描述】：

我正在使用 angular 6 的 materialize-stepper。从文档中我必须编写一些 HTML，然后初始化 DOM 元素，如

let stepperInstace = new MStepper(stepper, {
      // options
      firstActive: 0 // this is the default
})

还有 HTML

<ul class="stepper linear" #contentTypeStepper>
    <li class="step active">
        <div class="step-title waves-effect">E-mail</div>
        <div class="step-content">
            <!-- Your step content goes here (like inputs or so) -->
            <div class="step-actions">
                <!-- Here goes your actions buttons -->
                <button class="waves-effect waves-dark btn next-step">CONTINUE</button>
            </div>
        </div>
    </li>
    <li class="step">
        <div class="step-title waves-effect">Data</div>
        <div class="step-content">
            <!-- Your step content goes here (like inputs or so) -->
            <div class="step-actions">
                <!-- Here goes your actions buttons -->
                <button class="waves-effect waves-dark btn next-step">CONTINUE</button>
            </div>
        </div>
    </li>
</ul>

和 angular.json

中的 CSS 条目

"styles": [
       "node_modules/materialize-stepper/dist/css/mstepper.css"
]

在 ts 中我像导入它一样

import MStepper from "materialize-stepper/dist/js/mstepper";

@ViewChild("contentTypeStepper")
contentTypeStepper: ElementRef;

iContentTypeStepper: any;

并像初始化它一样

ngAfterViewInit(): void {
    console.log("TCL: AdminContentTypeDetailComponent -> MStepper", MStepper);
    this.iContentTypeStepper = MStepper.constructor(this.contentTypeStepper.nativeElement, {
          firstActive: 0 // this is the default
    });

}

但这不起作用。可能是什么问题？

【问题讨论】：

标签： angular materialize materialize-stepper

【解决方案1】：

这个库没有被适当地模块化，这使得使用起来有点迟钝。那里有关于如何为库创建.d.ts 文件以便为这样的库使用import 语法的帖子。我经常发现不这样做会更容易。

在 Angular 中使用此库的最简单方法是使其成为“全局”可用的库。

在你的 angular.json 文件中，确保你有

"node_modules/materialize-stepper/dist/css/mstepper.css"

在您的脚本属性中。

并且在您的styles 属性中（如您在上面列出的。也放

"node_modules/materialize-stepper/dist/js/mstepper.js"

然后在你的ts文件中，替换

import MStepper from "materialize-stepper/dist/js/mstepper";

与

declare const MStepper: any;

有了这些，你上面的代码应该可以工作了。

【讨论】：