订阅ActivatedRoute.params未被触发。

Question

问题在于当我在两个相似的URL之间导航时，我的组件没有重新绘制。例如，当用户查看 http://localhost:8088/#/app/route/study/6/detail，然后导航到 http://localhost:8088/#/app/route/study/7/detail 时，StudyComponent 被正确重新加载，但是DetailComponent 没有被重新加载。我认为原因是详细信息的params没有更改，因此Angular认为不需要重新加载。但在我的情况下，详细信息依赖于父级参数。

如何解决这个问题？

我的路由：

const studyRoutes: Routes = [
    {
        path: '', component: RouteComponent,
        children:  [
            {path: 'study/:id', component: StudyComponent,
            children: [
                {path: 'detail', component: DetailComponent },
                {path: 'parts', component: PartsComponent }
            ]
        }
    ]
}
];

我的所有组件都是这样初始化的：

ngOnInit() {
    this.loader = this.route.params.subscribe(params => this.onLoad());
}

ngOnDestroy() {
    this.loader.unsubscribe();
}

当我在不同研究的细节之间导航时，DetailComponent 中的 onLoad 从未被调用。

- John Henckel

---

Angular不会重新实例化您示例中的DetailComponent，这是路由器的默认重用策略。请参见https://medium.com/@juliapassynkova/angular-2-component-reuse-strategy-9f3ddfab23f5。 - Jota.Toledo

@Sajeetharan，我认为这.loader很明显哈哈 - Jota.Toledo

你在使用什麼來處理 this.route 嗎？它應該是 ActivatedRoute，這對你來說應該有效。但請注意，ngOninit 不一定會在每次轉到新元件時都被調用，所以如果你的意圖是在路由變更時調用 this.onLoad，就不應該依賴於該方法。 - David Anthony Acosta

@Jota.Toledo 我猜这是加载器 :P。也许我不像你那样专业 :) - Sajeetharan

@DavidAnthonyAcosta，是的this.route是注入的ActivatedRoute。我不依赖于ngOnInit被调用。但是，我期望this.onLoad被调用，但它并没有被调用。 - John Henckel

Answer 1

为了在DetailComponent级别上对:id参数的更改做出反应，您需要进行以下更改：

// detail.component.ts
ngOnInit() {
    this.loader = this.route.parent.params.subscribe(params => this.onLoad());
}

这是因为你路由中的路径detail没有定义:id参数，而它的父级定义了。所以在路由状态树的那个层级反映出了这些变化。

- Jota.Toledo

---

@JotaToledo，你真棒！这个完美地解决了问题！对于像我这样的新手，这是一个有用的教程 https://blog.angular-university.io/angular2-router/ - John Henckel

谢谢。我也遇到了同样的问题。 - Shashank