代码之家 › 专栏 › 技术社区 › Marcus Grass

角-通过内部导航的cdn加载外部脚本

masonry cdn angular html javascript

Marcus Grass · 技术社区 · 7 年前

我正在尝试通过加载 <script src=“https://unpkg.com/masonry layout@4/dist/masonry.pkgd.m in.js”></script> 在索引页的顶部,并在我的Web应用程序的组件上使用它。这个问题可能不是砖石结构的特定问题,一般的问题是头中包含的脚本没有加载到内部导航。

我已经选择在HTML中初始化砖石结构。使用内部导航访问页面时会出现问题。如果我将页面重新加载到正确的URL,脚本就会执行它的操作并创建所需的布局。但是,当在routerlink中导航时,脚本不会加载,或者其他错误导致脚本不适用。

以下是刷新页面时正确加载的图片:


   
    
     以及在内部导航到页面时的错误加载之一:
     
      
     
    
    
     网页的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”>
订购一些号码
</DIV>
</DIV>
<DIV class=“cardmain”>
卡文本
</DIV>
<div class=“cardbot”>
<A routerlink=“/orders”>了解更多信息></A>
</DIV>
</DIV>
</DIV>
在index.html中,上面提到的脚本也包含在内。


每次在内部导航页面时,您对如何加载脚本有什么想法?


我已经选择在HTML中初始化砖石结构。使用内部导航访问页面时会出现问题。如果我将页面重新加载到正确的URL,脚本就会执行它的操作并创建所需的布局。但是,当在routerlink中导航时,脚本不会加载,或者其他错误导致脚本不适用。

以下是刷新页面时正确加载的图片:


以及在内部导航到页面时的错误加载之一:


页面的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中,上面提到的脚本包含在内。

每次在内部导航页面时,您对如何加载脚本有什么想法?

3 回复 | 直到 7 年前

gugateider 7 年前

可能在加载mansory JS之前,您的角度脚本正在运行。尝试使用加载脚本或加载JS脚本来加载库,这样可以保证完成加载后,可以执行Manory布局构造函数。

Abhishek Sharma 7 年前

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

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

下面是一行代码,例如,您可能需要导入脚本。

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

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

u2tope 7 年前

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