Question

我们只是说我制作一个自定义JavaScript文件，即＆＃39; custom.js＆＃39;

我如何将其实现为组件？

如果我添加＆＃39; custom.js＆＃39;对index.html来说，这很好但是有什么方法可以将它专门添加到组件中吗？

Answer 1

步骤：1 =＆gt;创建和编写你的js代码说＆＃34; synapse.js ＆＃34;在 / app 文件夹中。应使用export关键字导出要在组件中使用的函数或常量。 for ex ：

synapse.js

export function synapseThrow() {
  return 'hello'
}

export const MY_VAR = 'world!';

步骤：2 =＆gt;在 angular-cli.json 中，在apps对象中添加以下部分。

"scripts": ["app/synapse.js"]

步骤：3 =＆gt;在 tsconfig.json 中，在compilerOptions。

中添加以下属性

"allowJs": true

步骤：4 =＆gt;在任何组件中说＆＃34; app.component.ts ＆＃34;导入＆＃34; synapse.js ＆＃34;文件使用import关键字。

app.component.ts

// other imports

import { MY_VAR, synapseThrow } from './synapse';

// other app code here

ngOnInit(){
  const returned = MY_VAR;
  const returnFunc = synapseThrow();
}

Answer 2

尝试声明custom.js文件中的变量

declare var aFunction: any;

import '../../../js/custom.js';

export class ExampleComponent{

    variable: any;

    constructor() { }

    ngOnInit() { 
       new aFunction(this.variable);  //aFunction() is inside custom.js
    }
}

Answer 3

尝试这种方式：

将js文件放入路径：assets / js / custom.js
编写组件代码

ts文件

export class MyComponent implements AfterViewChecked {
  constructor(private elementRef: ElementRef) {

  }
  ngAfterViewChecked() {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "../assets/js/custom.js";
    this.elementRef.nativeElement.appendChild(s);
  }
}

将JavaScript文件添加到Angular 4组件

3 个答案: