温馨提示:本文翻译自stackoverflow.com,查看原文请点击:angular - Incorrect component is loaded in mat-accordion with 'nested' router
angular angular-material angular-router

angular - 带有“嵌套”路由器的手风琴中装入了不正确的组件

发布于 2020-03-27 15:35:21

我使用mat-accordionrouter-outlet和观察一个奇怪的行为。以下是我的用例的示例实现。
https://stackblitz.com/edit/angular-material-accordion-with-router

在此示例中,面板3组件和面板4组件具有router-outlet现在,在第一次导航中,它可以按预期工作。但是,如果我折叠这些面板,然后再次尝试打开它们,我发现面板4的内容会反映在面板3中。

我不确定它是否存在错误angular-router或我在这里做错了什么。

查看更多

查看更多

提问者
Mahesh
被浏览
53
G. Tranter 2019-07-04 00:00

您已经将路线和出口与非路线和组件混淆了。路线用于显示插座中的指定组件,并且模板使用这些相同的组件。您只能做一个或另一个-将组件直接放在模板中,或使用一条路线将其显示在插座中。

您的模板在页面上放置了所有四个“面板”组件,其中两个(3和4)定义了插座。因此,页面上有两个出口。由于未命名,因此它们都想成为路由器的默认出口或“主要”出口,因此任何未定向到命名出口(这是您的所有路由)的路由都将转到其中一个(或者也许是两者-我不知道Angular如何处理)。

您还将路线用于不是路线的组件(面板1和2)。例如,如果打开面板1,然后打开DOM检查器,则将在面板3或4的插座中看到另一个面板1组件。

解决方法是从路由中删除不是实际路由的组件-“ panel1”和“ panel2”,并命名两个插座,并使用路由器和链接配置来定位这些插座。

Stackblitz