Question

基本上，我有两条路线：

{ path: ':id', component: VideosListComponent },
{ path: '', redirectTo: '/0', pathMatch: 'full' }

在应用路线根中，我通过VideosListComponent列出了视频。点击视频后，我需要显示视频并阻止更改路由器状态，以便组件不会重新初始化。

但是当我使用这样的路线时：

{ path: '', component: VideosListComponent },   
{ path: ':id', component: VideosListComponent }

当:id更改路由器状态也会发生变化。

第一个解决方案有效，但我不认为我的应用根重定向到/0。

问题：是否有可能实现从/到/:id的路线不会改变路由器状态？

解我已经按照@admax的说法工作了。我制作了父和子路线。在我的父VideoList组件中，我将所有showPlayer功能移至Child PlayerComponent。它在Angular 2中是一种正确的方式。

Answer 1

此变体适用于您：

{ path: '', component: VideosListComponent },   
{ path: ':id', component: VideosListComponent }

when：id更改路由器状态也会发生变化。

路由器状态将发生变化，但组件实例将被重用，因为两个路由都声明使用相同的组件类型，因此将保留组件状态。你只需要对params的变化做出反应并根据它来实现状态。

this.route.params.subscribe(params => {
    if (params['id']) {
       // display video
    } else {
       // display list
    }
});

还有一个建议：如果视频列表必须同时出现在＆＃34;页面＆＃34;上，可能它应该被移到父路线？

{ 
    path: '', 
    component: VideosListComponent,
    children: [
        { path: '', component: SomeEmptyComponent },
        { path: ':id', component: VideoDetailsComponent }
    ]
}

Angular 2管理Route的状态变化

1 个答案: