不正确的组件被装入带有“嵌套”路由器的mat手风琴中。

Question

我正在使用mat-accordion和router-outlet，并观察一个奇怪的行为。下面是我的用例的一个示例实现。

https://stackblitz.com/edit/angular-material-accordion-with-router

在本例中，面板3组件和面板4组件具有router-outlet。现在，在第一次导航中，它可以像预期的那样工作。但是，如果我折叠这些面板，并再次尝试打开它们，我会发现面板4的内容会在面板3中得到反映。

我不确定它是angular-router中的一个bug，还是我在这里做错了什么。

Answer 1

你混淆了路线和出口与非路线和组件。路由用于在出口中显示指定的组件，您的模板使用这些组件。您应该只执行一种或另一种--要么将组件直接放置在模板中，要么使用路由将其显示在一个出口中。

您的模板将所有四个“面板”组件放置在页面上，其中两个(3和4)定义出口。因此，您的页面上有两个出口。由于它们没有命名，所以它们都试图成为路由器的默认或“主”出口，因此，任何没有指向指定出口(这是所有路由)的路由都会流向其中的一个(或者两者兼而有之--我不知道如何从角度处理这个问题)。

您还在为不是路由的组件(面板1和2)使用路由。例如，如果打开面板1，然后打开DOM检查器，则会在面板3或4的出口处看到另一个面板1组件。

修复方法是从路由中删除非实际路由的组件-“panel1”和“panel2 2”，并使用路由器和链路配置命名这两个端口并针对这些端口。

斯塔克布利茨