Angular-在内部导航上通过CDN加载外部脚本

Question

我正在尝试通过加载<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>来创建砌体布局 在索引页面的顶部，并在我的Web应用程序的组件上使用它。 这个问题可能不是特定于砌体的，通常的问题是标题中包含的脚本未在内部导航中加载。

我选择了初始化HTML中的砖石结构。使用内部导航进入页面时，会发生此问题。如果我将页面重新加载到正确的URL，则脚本将执行其操作并创建所需的布局。但是，在浏览路由器链接时，脚本不会加载，或者其他原因使脚本不适用。

下面是刷新页面时发生的正确加载的图片：

以及内部导航到页面时的不正确加载之一：

页面的HTML：

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 5 }'>
  <div *ngFor="let card_text of card_array" class="grid-item">
    <div class="cardTop">
      <img src="/static/images/ordercards/greenOrderIcon.svg">
      <div class="orderId">
        Order # Some number
      </div>
    </div>
    <div class="cardMain">
      {{ card_text }}
    </div>
    <div class="cardBot">
      <a routerLink="/orders"> Learn More ></a>
    </div>
  </div>
</div>

，并且在index.html中包括顶部提到的脚本。

是否有关于每次内部浏览页面时如何加载脚本的想法？

Answer 1

在加载mansory js之前，您的角度脚本可能正在运行。 尝试使用load-script或load-js脚本加载库，这会给您一个承诺，即何时完成加载，然后执行mansory布局构造函数。

Answer 2

如果在内部导航期间正在调用任何组件，并且在其中编写了任何逻辑，则还需要将该脚本导入到该组件。

我已经使用了许多外部脚本，并且我的项目运行正常。

下面是示例代码行，也许您可​​能需要导入脚本。

import * as utility from 'assets/js/core/utility.js';  

这还将在组件中加载脚本。

Answer 3

我特别建议您在加载所有其他页面项目后加载砌体布局脚本。这意味着您应该将其添加到索引页面的底部。