как использовать материализацию-степпер с угловым

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> 

и запись CSS в angular.json

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

В тс я импортирую как

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 - это сделать ее доступной в глобальном масштабе.

В вашем *Файл 1007 * 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;

С этим на месте ваш код должен работать.