Angular 4 组件：从另一个文件调用 javascript/jquery 代码答案

【问题标题】：Angular 4 component : call javascript/jquery code from another fileAngular 4 组件：从另一个文件调用 javascript/jquery 代码
【发布时间】：2018-01-08 05:52:21
【问题描述】：

我有一个在ngAfterViewInit() 执行的 jquery 代码

//myComponent.ts
ngAfterViewInit() {
    $(function () {
    $('#myElement').click(function (e) {
        //code working fine here
    });
}

但我想将其移至外部 myScripts.js 以简化组件

我尝试将代码移动到外部文件，然后使用import，但这使得脚本只被调用一次，所以如果我导航到一个子组件（它会删除 html 元素myElement 并定义了onclick ) 然后回到父 myElement 没有 onclick 事件就回来了

所以问题是：

在 angular4 中使用 jquery/javascript 的最佳实践是什么

【问题讨论】：

标签： javascript jquery angular typescript

【解决方案1】：

你需要从myScripts.ts导出你的函数，然后import它并在ngAfterViewInit()中调用它。

正确导出后应该可以做到：

// app.ts
import { myInitFunc } from './myScripts';

ngAfterViewInit() {
  myInitFunc();
}

// myScripts.ts
export function myInitFunc(): void {
  $(function () {
    $('#myElement').click(function (e) {
      //do stuff
    });
  }
};

看看export:https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

【讨论】：