加载外部 JavaScript 的 Angular 2 问题答案

【问题标题】：Angular2 issues to load external javascripts加载外部 JavaScript 的 Angular 2 问题
【发布时间】：2017-02-09 18:44:24
【问题描述】：

我是 agnular2 的新手。我使用了 html5 主题和具有多个 javascript 文件的主题。现在的问题是我试图在我的 angular2 应用程序中加载这些文件，但加载不正确。

我所做的只是将该脚本链接到我的 index.html 文件，当我第一次打开页面时，脚本运行良好，但是当我在我的应用程序中路由页面时，它并没有加载到每个应用程序中路由器更改需要刷新页面。

请帮忙..!!!

【问题讨论】：

如果你们不知道，那么至少请不要放弃投票...这对其他人也有帮助。
对不起，我没有放弃投票。
对不起，我没有指出你..这是给反对者的

标签： angular

【解决方案1】：

这是因为你的 JS 文件是在组件生成之前加载的。尝试这样的事情：在您的 js 文件中使用构造函数 fn。 /**/ app.js

function callSomething(){
  console.log('something has been called.');
}

/* 在component.ts*/

declare var callSomething: any; //declare this at top;

现在您可以在任何方法中调用它：新的 callSomething();

【讨论】：

不，我正在使用 npm start 并运行 build 来运行我的应用程序
理想情况下它应该可以工作，如果你已经包含了你的 js 文件，它已经被加载，并且它应该是可用的，唯一的原因是它没有在视图中初始化。你如何在你的视图中调用它。你能分享你没有被调用的任何视图吗？
我刚刚包含在 index.html 文件中，而不是子模板中

【解决方案2】：

我认为你需要在你的视图上初始化它。我做了这样的事情：

在 app.js（我已经包含在我的 index.html 中）

function scrollToId(id){
  //scroll fn
}

在我看来/组件从'@angular/core'导入{组件，OnInit}；

declare var scrollToId: any;
@Component({})
export class UserDetailsComponent implements OnInit {
  constructor(){}
  ngOnInit() {
    new scrollToId('registration-form');
  }
}

&它对我来说很好用。

【讨论】：

我必须在我的 angular2 应用程序中使用主题 javascript 文件。这不是任何特定的功能
我只想指出的是，您还需要在视图上触发该功能。在我看来，当您必须在动态生成的元素上绑定事件时，情况相同，我在组件被渲染或被渲染时触发它。
第一次检查到控制台内的网络选项卡然后看到所有 js 文件都登录到网络选项卡但路由更改后它不可用