angular - 使用“嵌套”路由器将不正确的组件加载到 mat-accordion 中

Question

我正在使用mat-accordion并router-outlet观察到一种奇怪的行为。下面是我的用例的示例实现。
https://stackblitz.com/edit/angular-material-accordion-with-router

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

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

标签： angularangular-materialangular-router

Answer 1

您将路线和出口与非路线和组件混合在一起。路由用于在 outlet 中显示指定的组件，您的模板使用这些相同的组件。您应该只做一个或另一个 - 将组件直接放在模板中或使用路由将其显示在插座中。

您的模板将所有四个“面板”组件放置在页面上，其中两个（3 和 4）定义了出口。因此，您的页面上有两个出口。由于它们没有被命名，它们都试图成为您的路由器的默认或“主要”出口，因此任何未指向命名出口（这是您的所有路由）的路由都会转到其中一个（或者可能两者 - 我不知道 Angular 是如何处理这个问题的）。

您还为不是路由的组件使用路由（面板 1 和 2）。例如，如果您打开面板 1，然后打开 DOM 检查器，您将在面板 3 或 4 的插座中看到另一个面板 1 组件。

修复方法是从路由中删除不是实际路由的组件 - “panel1”和“panel2”，并命名两个出口并使用路由器和链接配置定位这些出口。

堆栈闪电战