Javascript 角度2管理路线'；s状态变化

基本上，我有两条路线：

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

在approute root中，我通过

VideosListComponent

列出视频。单击视频后，我需要显示视频和防止更改路由器状态，这样组件就不会重新初始化

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

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

当

：id

更改时，路由器状态也会更改

第一个解决方案可以运行，但我不喜欢我的应用程序根目录重定向到

/0

问题：是否可以实现从

/

到

/:id

的路由更改：不会更改路由器状态

---

解决方案

---

根据@admax，我已经让它工作了。我做了家长和孩子路线。从我的父母

VideoList

组件中，我将所有

showPlayer

功能移动到

Child player组件中。在Angular 2中，这是一种正确的方法。
此变体应该适合您：

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

当：id更改时，路由器状态也会更改

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

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

还有一个建议：如果视频列表必须同时显示在两个“页面”上，那么它是否应该移动到父路径

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

也许你不明白。在videoList项目上，单击我需要保留videoList（不更改）并根据
：id
显示视频播放器。当我使用您的解决方案时，
getVideos
函数会在每次单击VideoList时执行item@lomboboo这可能是因为你在错误的地方打电话给getVideos。我喜欢你关于儿童路线的想法，我会在一分钟内尝试。它似乎会奏效。因此，如果我理解正确，我应该将我的
showPlayer
功能移动到
VideoDetailsComponent
？@lomboboo是的，没错