Javascript 如何在Angular Typescript中使用JS文件

所以我买了这个引导主题，它使用aos.js库，所以我通过npm安装了这个库，并将它添加到我的angular.json的scripts标签中，如下所示：

            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
              "node_modules/aos/dist/aos.js"
            ]

import {Component, OnInit} from '@angular/core';
import * as AOSTheme from '../assets/js/aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'paydpromo-app';

  ngOnInit(): void {
    AOSTheme.init();
  }
}

我可以通过在app.component.ts中调用AOS插件来激活它本身

import {Component, OnInit} from '@angular/core';
import * as AOS from 'aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'something';

  ngOnInit(): void {
    AOS.init();
  }
}

但该主题随aos.js文件而来，为aos插件提供了选项：

//
// aos.js
// Theme module
//

'use strict';

(function() {

  //
  // Functions
  //

  function init() {
    var options = {
      duration: 700,
      easing: 'ease-out-quad',
      once: true,
      startEvent: 'load'
    }
    AOS.init(options);
  }


  //
  // Events
  //

  if (typeof AOS !== 'undefined') {
    init();
  }

})();

您可以看到，它已经在调用AOS.init（）函数，因此我假设不直接从app.component.ts调用插件，而是导入themes AOS.js文件并调用其

init（）

方法。在此之后，app.component.ts文件如下所示：

            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
              "node_modules/aos/dist/aos.js"
            ]

import {Component, OnInit} from '@angular/core';
import * as AOSTheme from '../assets/js/aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'paydpromo-app';

  ngOnInit(): void {
    AOSTheme.init();
  }
}

当我通过

ng serve

运行它时，插件和动画正在工作，但控制台显示一个错误

TypeError:\u assets\u js\u aos\u网页包\u IMPORTED\u MODULE\u 2\u.init

---

将DOM操作js库导入angular应用程序的正确方法是什么？

将js脚本添加到angular.json文件后。。在组件内声明库，如下所示，而不导入它

import {Component, OnInit} from '@angular/core';
declare var AOS: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'something';

  ngOnInit(): void {
    AOS.init();
  }
}

---

尝试将js脚本添加到angular.json architect部分的脚本数组中。然后在脚本标记内的index.html中调用init方法，或者在应用程序组件上方使用

declare const AOS

，并在ngOnInit中调用其init方法。假设AOS是库自身注册到的全局对象的名称