首页 文章

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

提问于
浏览 次
3

我有一个子路线的应用程序

父组件（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并设置为公共属性 .

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

`

angular angular2-routing

1 回答

  • 2

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

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

    routerCanReuse() {
  return false;
}

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

    回复于

相关问题