Выполнение JS-скрипта при изменении маршрута в Angular 6

Question

Я работаю над сайтом, изначально разработанным в vanilla JS и JQuery.Недавно мы решили обновить наш пользовательский интерфейс до Angular и машинописи.Мы используем piwik для мониторинга активности наших клиентов, а модуль piwik был сделан на чистом JS.Моя проблема заключается в том, что всякий раз, когда маршрут меняется на сайте, мне нужно снова запускать сценарий piwik (чтобы связать события piwik с компонентами), но сценарий не выполняется снова, потому что сайты не обновлялись.Я хочу вручную выполнить скрипт из машинописного текста (возможно, используя JQuery).Все решения, которые я видел, состояли в том, чтобы вручную удалить скрипт из DOM, а затем добавить его снова, но это выглядит как хак, есть ли способ выполнить скрипт с помощью веб-пакета / JQuery / Любой другой технологии?

Answer 1

Сам Angular Router обеспечивает наблюдаемый поток.

Вы можете создать охрану маршрута, который подписывается на маршрут, когда событие NavigationEnd вызывает вашу логику.

constructor(private router: Router) {}

.....

this.router.events
      .subscribe((event) => {
        if (event instanceof NavigationEnd) {
          console.log('NavigationEnd:', event);
        }
      });

Возможно, стоит прочитать о События маршрутизатора

Предполагая, что piwiki существует в глобальной области видимости, вы можете вызвать его, используя InjectionToken

Я не знаком с этим пакетом вообще, однако что-то вроде:

import { InjectionToken } from '@angular/core';
export const PWIKIPLUGIN = new InjectionToken('PWIKIPLUGIN');

А затем вызовите его с вашим конструктором

constructor(@Inject(PWIKIPLUGIN) private pwikiPlugin) {}

Это даст вам возможность вызывать pwikiPlugin.something()