angular 4 重新路由时调用组件方法

Question

我有一个路由策略，在路由到另一个组件时不会破坏该组件。当（重新）路由到组件时，我想调用组件的方法。

到目前为止，我已经尝试使用接口 AfterContentChecked 和 AfteViewChecked 各自的方法 ngAfterContentChecked 和 `ngAfterViewChecked 来实现它们。实现其中一个接口的唯一问题是在路由到组件时多次调用该方法，这对我来说是一个性能问题。

在研究网络时，我还没有找到可以实施以获得所需行为的界面。

解决这个问题的唯一方法是在路由器中验证选择了哪个route/path，如果是所需的，我调用组件的方法？

Answer 1

每当路由发生时，都会创建组件并调用 ngOnInit 函数。

export class TestComponent implements OnInit{
  constructor(){
     //called first time before the ngOnInit()
  }

  ngOnInit(){
     //called after the constructor
  }
}

我们还有其他两个选项 -

Resover - resolve 函数
Gaurds - canActive 函数

Resolver 和 Gaurd 在路由发生变化时执行。

Answer 2

您可以订阅 router's events，这将在每次您的路线更改时触发一个事件。然后就可以获取off这个事件的active路由，查看你当前所在组件的路由是否等于该路由。

提示：使用 instanceof NavigationEnd

过滤事件

Answer 3

你基本上可以添加 inject Router 作为依赖项，然后在其上订阅 events。 Router 公开了一个 events 的列表。

由于我们只关心 NavigationEnd 事件，您可以使用 filter 运算符将其过滤掉。

事件数据有一个 url 属性可用于与 NavigationEnd

之后获得的路径进行比较

this.router.events
.pipe(
  filter(event => event instanceof NavigationEnd)
)
.subscribe((event: any) => {
  console.log('Got the Event URL as '. event.url);
})

这里有一个 Sample StackBlitz 供您参考。

angular 4 重新路由时调用组件方法

angular 4 call component method when re-routing to it

angular

components

angular-routing

angular4-router