我使用mat-accordion
与router-outlet
和观察一个奇怪的行为。以下是我的用例的示例实现。
https://stackblitz.com/edit/angular-material-accordion-with-router
在此示例中,面板3组件和面板4组件具有router-outlet
。现在,在第一次导航中,它可以按预期工作。但是,如果我折叠这些面板,然后再次尝试打开它们,我发现面板4的内容会反映在面板3中。
我不确定它是否存在错误angular-router
或我在这里做错了什么。
您已经将路线和出口与非路线和组件混淆了。路线用于显示插座中的指定组件,并且模板使用这些相同的组件。您只能做一个或另一个-将组件直接放在模板中,或使用一条路线将其显示在插座中。
您的模板在页面上放置了所有四个“面板”组件,其中两个(3和4)定义了插座。因此,页面上有两个出口。由于未命名,因此它们都想成为路由器的默认出口或“主要”出口,因此任何未定向到命名出口(这是您的所有路由)的路由都将转到其中一个(或者也许是两者-我不知道Angular如何处理)。
您还将路线用于不是路线的组件(面板1和2)。例如,如果打开面板1,然后打开DOM检查器,则将在面板3或4的插座中看到另一个面板1组件。
解决方法是从路由中删除不是实际路由的组件-“ panel1”和“ panel2”,并命名两个插座,并使用路由器和链接配置来定位这些插座。
感谢您的回答。我需要面板1和面板2中的那些路线,因为我从应用程序的其他部分获得了一些导航,这些导航应该直接落在指定的面板上。我很惊讶这两个组件的复制角度如何
<router-outlets>
?毫不奇怪,因为不支持页面上有多个未命名的出口-因此您不能指望可预测的行为。