在Angular 6中执行路由更改的JS脚本

Question

我正在开发一个最初用 vanilla JS 和 JQuery 开发的网站。 最近我们决定将我们的 UI 升级为 Angular 和 typescript。 我们使用 piwik 来监控我们的客户活动，并且 piwik 模块是用纯 JS 制作的。我的问题是，每当站点中的路线发生变化时，我都需要再次运行 piwik 脚本（以便将 piwik 事件绑定到组件），但由于站点尚未刷新，该脚本不会再次执行。 我想要的是从打字稿手动执行脚本（也许使用 JQuery）。我看到的所有解决方案都是手动从 dom 中删除脚本，然后再次添加它，但这似乎是一个 hack，有什么方法可以使用 webpack/JQuery/任何其他技术执行脚本？

Answer 1

Angular 路由器本身提供了一个可观察的流。

您可以创建一个订阅路由的路由守卫，当NavigationEnd 事件发生时调用您的逻辑。

constructor(private router: Router) {}

.....

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

Router Events 上可能值得一读

假设 piwiki 存在于全局范围内，您可以使用 InjectionToken 调用它

我对这个包一点也不熟悉，不过是这样的：

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

然后用你的构造函数调用它

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

这应该使您能够调用pwikiPlugin.something()