Angular - загрузка внешнего скрипта через CDN по внутренней навигации - PullRequest
Новая
       11

Angular - загрузка внешнего скрипта через CDN по внутренней навигации

0 голосов
/ 02 июля 2018

Я пытаюсь создать макет кладки, загружая в <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> в верхней части страницы индекса и использовать его в компоненте моего веб-приложения. Эта проблема, вероятно, не относится к конкретной кладке, общая проблема заключается в том, что включенный в заголовок скрипт не загружается при внутренней навигации.

Я выбрал инициализацию кладки в HTML. Проблема возникает при использовании внутренней навигации для перехода на страницу. Если я перезагружаю страницу по правильному URL-адресу, сценарий делает свое дело и создает нужный макет. Однако при навигации по ссылкам на роутеры скрипты не загружаются или что-то не так, что делает его неприменимым.

Вот изображение правильной загрузки, которая происходит при обновлении страницы: enter image description here

И одна из неправильных загрузок при внутренней навигации по странице: enter image description here

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 ]

0 голосов
/ 02 июля 2018

Возможно, ваш угловой скрипт запущен до загрузки mansory js. Попробуйте загрузить библиотеку с помощью скриптов load-script или load-js, которые дадут вам обещание, когда она завершит загрузку, затем вы запустите конструктор mansory layout.

0 голосов
/ 02 июля 2018

Я бы специально предложил вам загрузить скрипт макета кладки, когда все остальные элементы страницы загружены. Это означает, что вы должны добавить его внизу страницы указателя.

0 голосов
/ 02 июля 2018

Если во время внутренней навигации вы вызываете какой-либо компонент и там написали какую-либо логику, то вам также необходимо импортировать этот скрипт в этот компонент.

Я использовал много внешних скриптов, и мой проект работает нормально.

Ниже приведена, например, строка кода, которая может потребоваться для импорта сценариев. 

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

Это также загрузит скрипт в компонент.

...