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

Posted 2023-02-23

【中文标题】从 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

【发布时间】：2016-08-11 16:27:43

【问题描述】：

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

父组件（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。对于第二条路线“垃圾”，我传递了一个 RouteData isTrash:true

MessageListComponent 读取传递的 RouteData 并设置为公共属性。

 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 中设置公共属性“isTrash”？

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

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

`

【问题讨论】：

用修复更新了 plunkr。实现了 CanReuse，routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) return false; 在消息列表组件中

【参考方案1】：

如果显示了组件但没有调用构造函数，这意味着之前创建的实例被重用了。

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

routerCanReuse() 
  return false;

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