Angular - 如何将 Javascript 导入 Angular 组件

Question

在我的 Angular-11 中，我有这个 Javascript 文件：

"node_modules/admin-lte/plugins/bs-stepper/js/bs-stepper.min.js",

如上所示，我将它添加到 angular.json 中。

import Stepper from '...';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
  name = 'Angular';
  private stepper: Stepper;

  next() {
    this.stepper.next();
  }

  onSubmit() {
    return false;
  }

  ngOnInit() {
    this.stepper = new Stepper(document.querySelector('#stepper1'), {
      linear: false,
      animation: true
    })
  }
}

如何将其导入到这个组件中：profile.component.ts 这种方式，

从'...'导入步进器；

来自 Javascript 路径

谢谢

Answer 1

你必须先在 typing.d.ts 中声明它并包含 angular.json 脚本。

在 angular.json 中

{
  "build" : {
      "scripts" : [
           "node_modules/admin-lte/plugins/bs-stepper/js/bs-stepper.min.js",
           ....
       ]        

在 typing.d.ts 中

declare module 'admin-lte/plugins/bs-stepper/js/bs-stepper.min';

注意：如果这是一个 JQuery 包，那么你需要创建一个接口。

declare module 'jquery';
interface JQuery { 
  Stepper(DOM : any, options?: any): any;
}

终于可以在组件中调用了。

在组件中

import Stepper from 'admin-lte/plugins/bs-stepper/js/bs-stepper.min';

编辑： 在 src 文件夹中创建一个名为 typing.d.ts 的文件。然后添加

/// <reference path = "typings.d.ts" />

到src/main.ts 文件的顶部

Answer 2

碰巧有一个用于 bs-stepper 的 NPM 包，可以开箱即用地与 Angular 一起使用。

1。安装包

从项目根文件夹，运行命令

npm install bs-stepper --save

如果需要，还可以安装 bootstrap

npm install bootstrap --save

2。导入 CSS

styles.css

@import '~bs-stepper/dist/css/bs-stepper.min.css';

/* Also import bootstrap if needed */
@import '~bs-stepper/dist/css/bs-stepper.min.css';

3。使用ViewChild 而不是querySelector

在 Angular 应用程序中使用 document.querySelector 会搜索整个 DOM，而该元素只会出现在当前组件中。根据应用程序的大小，它可能会导致性能问题。相反，您可以将 @ViewChild 装饰器与模板引用变量一起使用

模板 (*.html)

<!-- Here, `bsStepper` is the template reference variable -->

<div #bsStepper id="stepper1" class="bs-stepper">
  ...
</div>

组件 (*.ts)

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import Stepper from 'bs-stepper';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('bsStepper', { static: false }) stepperElement!: ElementRef<any>;
  public stepper!: Stepper;

  next() {
    this.stepper.next();
  }

  onSubmit() {
    return false;
  }

  ngAfterViewInit() {
    this.stepper = new Stepper(this.stepperElement.nativeElement, {
      linear: false,
      animation: true
    });
  }
}

工作示例：Stackblitz