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

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。对于第二条路线“垃圾”，我传递了一个 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 方法时，构造函数和路由器生命周期 Hook 都没有被触发。

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

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

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

`

Answer 1

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

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

routerCanReuse() {
  return false;
}

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