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。对于第二条路线＆＃39; Trash＆＃39;，我正在传递一个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模板具有调用方法的链接＆＃39; NavigateTo＆＃39;使用所需的路线名称。

<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方法时，构造函数和路由器生命周期挂钩都没有被触发。

如何设置公共财产＆＃39; isTrash＆＃39;在路由到＆＃39; / messages / trash＆＃39;时在MessageListComponent中致电＆＃39; NavigateTo＆＃39; MessageListComponent本身的方法？

当路由＆＃39; / messages / trash＆＃39;正在按预期触发构造函数和路由器生命周期挂钩。可以直接从浏览器访问，也可以刷新页面。

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

`

Answer 1

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

通过向您的组件添加routerCanReuse()方法

来实施CanReuse

routerCanReuse() {
  return false;
}

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

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

1 个答案: