Angular - 如何将 Javascript 导入 Angular 组件

Posted 2023-03-13

【中文标题】Angular - 如何将 Javascript 导入 Angular 组件

【英文标题】：Angular - How to import Javascript into Angular Component

【发布时间】：2021-08-10 12:53:26

【问题描述】：

在我的 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 路径

谢谢

【问题讨论】：

你试过import Stepper from 'bs-stepper';吗？

@RomanA - 当我从 'bs-stepper' 导入 Stepper 时；它不认识 Stepper。所以，我使用的是 AdminLTE3，它有自己的助手

import * as Stepper from 'node_modules/admin-lte/plugins/bs-stepper/js/bs-stepper.min.js;'或从 'node_modules/admin-lte/plugins/bs-stepper/js/bs-stepper.min.js;' 导入 Stepper你试过这个吗？

@RomanA。 - 我收到此错误：ot using the local TSLint version found for 'c:/xampp/htdocs/myapp/src/app/auth/profile/profile.component.ts' 要从当前工作区启用代码执行，您必须启用工作区库执行.tslint(1)

请检查这个以获取您的最新一期***.com/questions/65228384/…

【参考方案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 文件的顶部

【讨论】：

typing.d.ts 在哪里？谢谢

【参考方案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

【讨论】：

一切看起来都很好，直到我在 component.ts 中收到此错误：属性 'stepperElement' 没有初始化程序，并且未在构造函数中明确分配。 ts(2564) 属性 'stepper' 没有初始化器，并且在构造函数中未明确分配。 ts(2564)

@user11352561：已经讨论过here。快速解决方法是明确告诉 TS 编译器该属性：public stepper!: Stepper;。注意声明中的感叹号。也需要 @ViewChild 属性。我已经调整了答案和 Stackblitz。