Angular-如何将Javascript导入Angular组件

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

“node_modules/admin lte/plugins/bs stepper/js/bs stepper.min.js”

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

从“…”导入步进器；
@组成部分({
选择器：“应用程序配置文件”，
templateUrl:'./profile.component.html'，
样式URL:['./profile.component.css']
})
导出类ProfileComponent实现OnInit{
名称='角度'；
私人步进机：步进机；
下一个（）{
this.stepper.next（）；
}
onSubmit（）{
返回false；
}
恩戈尼尼特（）{
this.stepper=新的stepper（document.querySelector（“#stepper1”）{
线性：假，
动画：真的
})
}
}

您必须首先在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';

编辑：在src文件夹中创建一个名为

typing.d.ts

的文件。然后加上

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

//

---

在

src/main.ts

文件的顶部，碰巧有一个NPM包，可以在开箱即用的情况下使用

1.安装软件包 从项目根文件夹中，运行命令

npm install bs-stepper --save

如果需要，还可以安装

bootstrap

npm install bootstrap --save

2.导入CSS 样式。css

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

@import'~bs stepper/dist/css/bs stepper.min.css'；
/*如果需要，还可以导入引导*/
@导入“~bs stepper/dist/css/bs stepper.min.css”；

3.使用

ViewChild

而不是

querySelector

在Angular应用程序中使用

document.querySelector

将搜索整个DOM，而元素将仅出现在当前组件中。根据应用程序的大小，可能会导致性能问题。相反，您可以将

@ViewChild

装饰器与模板引用变量一起使用

模板（*.html）

...

组件（*.ts）

从'@angular/core'导入{Component，AfterViewInit，ViewChild，ElementRef}；
从“bs Stepper”导入步进机；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现AfterViewInit{
@ViewChild（'bsStepper'，{static:false}）StepperRelation！：ElementRef
您是否尝试过从“bs Stepper”导入Stepper；

？@RomanA-当我从“bs Stepper”导入Stepper时，它无法识别Stepper。因此，我使用AdminLTE3，它有自己的帮助导入*作为“node_modules/admin lte/plugins/bs Stepper/js/bs Stepper.min.js”或从“nod”导入Steppere_modules/admin lte/plugins/bs stepper/js/bs stepper.min.js；'您尝试过这个吗？@RomanA.-我得到了这个错误：ot使用为'c:/xampp/htdocs/myapp/src/app/auth/profile/profile.component.ts'找到的本地TSLint版本要从当前工作区启用代码执行，您必须启用工作区库执行。TSLint（1）请检查一下您最新的问题，在typing.d.ts中位于何处？谢谢，在我在组件中遇到此错误之前，一切看起来都很好。ts:Property'steprerelation'没有初始值设定项，也没有在构造函数中明确指定。ts（2564）属性“stepper”没有初始值设定项，并且在构造函数中没有明确指定。ts（2564）@user11352561:已经讨论过了。快速修复方法是明确地告诉TS编译器有关属性：

public stepper！：stepper；

。请注意声明中的感叹号。还需要

@ViewChild

属性。我已经调整了答案和堆栈闪电。