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

Question

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

我选择在 HTML 中初始化砌体。使用内部导航访问页面时会出现问题。如果我将页面重新加载到正确的 URL，则脚本会执行其操作并创建所需的布局。但是，当通过 routerlinks 导航时，脚本不会加载，或者其他错误导致它不适用。

这是刷新页面时正确加载的图片：

在内部导航到页面时出现的错误加载之一：

页面的 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 之前，您的 Angular 脚本可能正在运行。 尝试使用 load-script 或 load-js 脚本加载库，这将给你一个完成加载的承诺，然后你执行你的 mansory 布局构造函数。

Answer 2

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

我使用了许多外部脚本，我的项目运行良好。

下面是您可能需要导入脚本的代码行。

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

这也会在组件中加载脚本。

Answer 3

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