如何在Angular Typescript中使用JS文件

Question

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

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

我可以通过在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调用插件，而是导入主题aos.js文件并调用它的init()方法。在此之后，app.component.ts文件如下所示：

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: _assets_js_aos__WEBPACK_IMPORTED_MODULE_2__.init

将处理DOM的js库导入到你的angular应用中的正确方法是什么？

Answer 1

将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();
  }
}