Angular

Question

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

我选择在 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

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

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

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

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

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

Answer 2

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

Answer 3

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

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

Angular - Loading external script through CDN on internal navigation

javascript

html

cdn

masonry