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

debugcn 发表于 Dev

贝尔科维奇·阿德里安

我试图js在一个角度应用程序中包含一些存储在文件中的方法。不幸的是，我无法让浏览器看到该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
-Scripts 部分

"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"
            ]
          }

托尼·吴

试试这个，看看是否适合你

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。