时间戳

首页 > 解决方案 > Angular - 如何将 Javascript 导入 Angular 组件

javascript - Angular - 如何将 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 这种方式，

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

从 Javascript 路径

谢谢

标签： javascriptangular

解决方案

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

在 angular.json

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

在打字.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';

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

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

到src/main.ts文件顶部

推荐阅读