如何订阅角度路由器导航方法[重复]答案

【问题标题】：How to subscribe to angular router navigate method [duplicate]如何订阅角度路由器导航方法[重复]
【发布时间】：2020-05-05 08:42:18
【问题描述】：

您好，我正在开发应用程序，我想在其中使用角度路由器，并且在导航方法之后从 DOM 获取一些元素并更改它们的属性。我的问题是，当我尝试立即获取这些元素时，我收到“无法读取属性 'getElementById' of null”错误。我可以以某种方式等到页面加载吗？当客户端在正确的 url 上时，代码可以正常工作。

这是我的简化代码：

    this.router.navigate(['/' + line.building + '/' + line.level], {relativeTo: this.route});
    const svg = document.getElementsByTagName('svg').namedItem(line.building + line.level +'-svg');
    const rect = svg.getElementById(line.name);
    rect.setAttribute('fill', '#05ff00');

【问题讨论】：

标签： angular typescript angular-router dom-manipulation

【解决方案1】：

window.onload 可能是您正在寻找的东西，但是我不明白您到底想要达到什么目的，请您澄清一下。

【讨论】：

这是我想要完成的事情，但它不会在路由器事件后触发

【解决方案2】：

您需要订阅路由器事件，然后将您的代码包装在该事件中在顶部添加：

import { Router, NavigationEnd, Event as NavigationEvent } from '@angular/router';

然后在ngOnInit钩子中添加这个：

this.router.events
      .subscribe(
        (event: NavigationEvent) => {
          if(event instanceof NavigationEnd) {
            const svg = document.getElementsByTagName('svg').namedItem(line.building + line.level +'-svg');
            const rect = svg.getElementById(line.name);
            rect.setAttribute('fill', '#05ff00');
          }
        });

【讨论】：