0

我正在尝试使用角度为 12 的智能向导，但在使其工作时遇到了一些麻烦。以下是我遵循的步骤：

  • npm 安装智能向导
  • 然后在我想要使用它的组件中导入智能向导。

import {
  Component,
  OnInit
} from '@angular/core';
import {
  MatDialogRef,
  MAT_DIALOG_DATA
} from '@angular/material/dialog';
import {
  smartWizard
} from 'node_modules/smartwizard';
import * as $ from "jquery";

@Component({
  selector: 'app-start-up-wizard',
  templateUrl: './start-up-wizard.component.html',
  styleUrls: ['./start-up-wizard.component.scss']
})
export class StartUpWizardComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef < StartUpWizardComponent > ) {}

  ngOnInit(): void {
    console.log("reaching here");
    $('#smartwizard').smartWizard();
  }

  onClose(): void {
    this.dialogRef.close();
  }
}
<div id="smartwizard">
  <ul>
    <li><a href="">Step Title 1<br /><small>Step Description 1</small></a></li>
    <li><a href="">Step Title 2<br /><small>Step Description 2</small></a></li>
    <li><a href="">Step Title 3<br /><small>Step Description 3</small></a></li>
    <li><a href="">Step Title 4<br /><small>Step Description 4</small></a></li>
    <li><a href="">Step Title 5<br /><small>Step Description 5</small></a></li>
  </ul>
  <div>
    <div id="step1">
      Step Content 1
    </div>
    <div id="step2">
      Step Content 2
    </div>
    <div id="step3">
      Step Content 3
    </div>
    <div id="step4">
      Step Content 4
    </div>
    <div id="step5">
      Step Content 5
    </div>
  </div>
</div>
<a (click)="onClose()" class="btn btn-dark" style="margin-left: 5px;color:white;">Close</a>

我希望它可以工作，但我在控制台中收到一个错误，说“TypeError：jquery__WEBPACK_IMPORTED_MODULE_0__(...).smartWizard 不是 StartUpWizardComponent.ngOnInit 的函数”，在 npm 安装智能向导并导入之后我不明白。它应该对组件可用。

4

0 回答 0