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

Question

此问题已经在这里有了答案：

Executing code after router.navigate in Angular2（4个答案）

关闭4小时前。

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

这是我的简单代码：

    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');

Answer 1

window.onload可能是您想要的，但是我不明白您要实现的目标是什么，请您澄清一下。

Answer 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');
          }
        });