Question

我在angular-cli.json文件中包含了如下脚本：

"scripts": [
    "assets/app/vendors/js/vendors.min.js",
    "app-assets/js/core/app-menu.js",
    "app-assets/vendors/js/charts/raphael-min.js",
    "app-assets/vendors/js/charts/morris.min.js",
    "app-assets/js/scripts/charts/morris/smooth-line.js"
  ],

Morris js图表显示页面最初加载时但是当我更改路径时，我可以看到脚本文件未加载。任何人都可以帮我这个吗？

Answer 1

在Angular 2+中，只要路由发生，DOM就会重写。所以，而不是在angular-cli.json中添加它，将文件复制到assets文件夹，然后您可以在更改路径时动态地将这些文件添加到DOM。 `

 //app.component.ts
    this.router.events.subscribe(event => {
          if(event instanceof NavigationStart) {
              let node = document.createElement('script');
              node.src = path;
              node.type = 'text/javascript';
              node.async = false;
              node.id =id;
              node.charset = 'utf-8';
              document.getElementsByTagName('head')[0].appendChild(node);
            }
    }

`

Answer 2

如果他们的代码在document.ready事件中初始化，请检查您的脚本或第三方脚本。这意味着一旦你的Angular应用加载，它们就会初始化。但是当你导航到另一个页面时，Angular将不会重新加载页面（很明显，SPA会以这种方式工作），它只会呈现html而document.ready不会被激活。

您可以做的是在打开的页面上绑定脚本事件，而不是准备好文档。

或者更简洁的解决方案是订阅路由器事件，当导航结束时，从.ts文件以编程方式加载脚本。

Answer 3

我与图表JS工作完全相同的问题。我创建使用放置在html画布的ID的图表如下所示：

this.chart =新的图表（ 'chartCanvas'，{ ...选项 } 图表装载在刷新很好，但是当我从不同的页面执行的导航，图表面积为空白（没有错误）

此溶液为我工作 - 定义一个ElementRef的画布和使用从ElementRef天然元件如下创建图表对象：

.html：

<canvas #chartCanvas id="chartCanvas"></canvas>

.TS文件：

@ViewChild("chartCanvas") chartCanvas: ElementRef;



this.chart = new Chart(this.chartCanvas.nativeElement, {
  ...options
}

Angular cli项目 - 更改路径时脚本未正确加载

3 个答案: