Question

我正在将materialize-stepper与角度6一起使用。从文档中，我必须编写一些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
    });

}

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

Answer 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;

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

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

1 个答案: