从 Angular2 路由中的子组件调用 router.parent.navigate 方法时未触发组件构造函数和路由器生命周期挂钩

Question

我有一个包含子路由的应用程序

父组件（App组件）有2条路由

@RouteConfig([
{ path: '/overview', name: 'Overview', component: OverviewComponent, useAsDefault:true },
{ path: '/messages/...', name: 'Messages', component: MessagesComponent }])

MessagesComponent 有 2 条路由

 @RouteConfig([  
    {path:'/inbox',    name: 'Inbox',   component: MessageListComponent, useAsDefault: true}, 
    {path:'/trash', name: 'Trash', component: MessageListComponent, data:{isTrash:true}},])

MessagesComponent 中的两条路由都使用相同的组件 MessageListComponent。对于第二条路线 'Trash'，我传递了一个 RouteData {isTrash:true}

MessageListComponent 读取传递的 RouteData 并设置为 public 属性.

 constructor(params: RouteParams, data: RouteData, private _router: Router) {
        console.log('Constructor of MessageList called.');
        this.isTrash = data.get('isTrash');}

MessageListComponent 模板包含使用所需路由名称调用方法 'NavigateTo' 的链接。

<a (click)="navigateTo('Inbox')" href="javascript:;">Inbox</a>
<a (click)="navigateTo('Trash')" href="javascript:;">Trash</a>

MessageListComponent 中的 NavigateTo 方法

public navigateTo(route: string) {
        console.log('Method NavigateTo called.')
        this._router.parent.navigate([route]);
}

我面临的问题如下。

当我从 MessageListComponent 调用 NavigateTo 方法时，构造函数和路由器生命周期挂钩都没有被触发。

当通过从 MessageListComponent 本身调用 'NavigateTo' 方法路由到“/messages/trash”时，如何在 MessageListComponent 中设置 public 属性 'isTrash'？

当从浏览器直接访问路由“/messages/trash”或刷新页面时，构造函数和路由器生命周期挂钩按预期触发。

请在下面找到我创建的显示上述问题的 plunkr。 https://plnkr.co/edit/oT6ZS8cXrDEIUCgqge60

`

Answer 1

如果显示了组件但未调用构造函数，则表示重复使用了先前创建的实例。

通过将 routerCanReuse() 方法添加到您的组件来实现 CanReuse

routerCanReuse() {
  return false;
}

还有 OnReuse 当路由器添加现有实例时调用（而不是构造函数）

从 Angular2 路由中的子组件调用 router.parent.navigate 方法时未触发组件构造函数和路由器生命周期挂钩

Component constructor and Router life-cycle hooks not triggered when calling router.parent.navigate method from child component in Angular2 routing

angular

angular2-routing