Angular 5：Js无法在app.component.html上运行

Question

我想将购买的html模板转换为angular5。问题是，当我将代码放入app.component.html中时，代码无法正常工作，css可以工作，但是js不能工作。但是，当我复制所有代码并将其直接放入index.html时，它就可以工作了。这可能是什么问题。

放入app.component.html时

放入index.html时

Answer 1

当我知道angular创建了组件后，它会渲染动态JS时，我面临着同样的错误。由于我也不太可能拆分所有JS文件，因此将它们分别转换并分别放置在每个组件的app.component.ts中。

这是一种简单的方法。

    export class AppComponent {
      title = 'angapp';
      constructor() { 
       this.loadScripts(); 
     }
  loadScripts() { 
  
    // This array contains all the files/CDNs 
    const dynamicScripts = [ 
        'assets/js/jquery.min.js',
       //Load all your script files here'
    ]; 
    for (let i = 0; i < dynamicScripts.length; i++) { 
      const node = document.createElement('script'); 
      node.src = dynamicScripts[i]; 
      node.type = 'text/javascript'; 
      node.async = false; 
      document.getElementsByTagName('head')[0].appendChild(node); 
    } } }

使用此代码将class AppComponent替换为app.component.ts，并将所有脚本文件以与提供示例相同的方式放置在dynamicScripts数组中。

这对我有用。我希望它也能解决您的问题。

Answer 2

您必须将HTML代码放入app.component.html，将CSS代码放入app.component.css，并将js代码放入app.component.ts。