开发者问题收集

Angular - 如何将 Javascript 导入 Angular 组件

2021-05-21
1421
javascript angular

在我的 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，

import Stepper from '...';

从 Javascript 路径

谢谢

2个回答

您必须首先在 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 文件的顶部

Onur Özkır
2021-05-21

碰巧，有一个用于 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

Michael D
2021-05-21