为什么我不能在 Angular 应用程序中使用 JS 文件？

Question

我正在尝试将一些 js 方法包含在 Angular 应用程序的文件中。不幸的是，我无法让浏览器看到 js 文件。
我查看了这个 SO 帖子并关注说明，但浏览器看不到文件 (Sources) 部分。

Js 文件

 function  toggleModal(id) {
        var modal = document.getElementById(id);
        $("#" + id).modal('toggle');
    }

    function setPag(tableId) {
        $(tableId).DataTable();
    }

我的文件位于里面：

Root/
  assets/
    js/
      scr.js

在组件中的使用

declare function setPag(id:string):any;
declare function toggleModal(id:string):any;

@Component({
  selector: 'index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
     public toggle(id:string){
        toggleModal(id);
     }
     public setPage(id:string)
     {
        setPag(id);
     }
}

Angular.json
-脚本部分

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/AnubisUI",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/assets"

            ],

            "scripts": [
              "./src/assets/js/scr.js",
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.js"
            ]
          }

Answer 1

试试这个看看是否适合你

import * as helper from 'assets/js/scr.js'

@Component({
  selector: 'index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
     public toggle(id:string){
        helper.toggleModal(id);
     }
     public setPage(id:string)
     {
        helper.setPag(id);
     }
}

旁注：每个静态文件都应该添加到资产文件夹中，以便您可以导入到您的角度代码中