使用 'nested' 路由器在 mat-accordion 中加载了不正确的组件
Incorrect component is loaded in mat-accordion with 'nested' router
我正在使用 mat-accordion 和 router-outlet 并观察到一个奇怪的行为。下面是我的用例的示例实现。
https://stackblitz.com/edit/angular-material-accordion-with-router
在此示例中，面板 3 组件和面板 4 组件具有 router-outlet。
现在在第一次导航中它按预期工作。但是，如果我折叠这些面板并再次尝试打开它们，我会发现面板 4 的内容反映在面板 3 中。
我不确定这是 angular-router 中的错误还是我在这里做错了什么。
您将路线和出口与 non-routes 和组件混淆了。路由用于在出口中显示指定的组件，您的模板使用这些相同的组件。您应该只做其中之一 - 直接将组件放在模板中或使用路由将其显示在插座中。
您的模板将所有四个 'panel' 组件放在页面上，其中两个（3 和 4）定义了出口。因此，您的页面上有两个出口。由于它们未命名，它们都试图成为路由器的默认或 'primary' 插座，因此任何未指向命名插座的路由（这是您的所有路由）都会转到其中一个（或者两者兼而有之——我不知道 Angular 是如何处理这个问题的）。
您还在为不是路线的组件使用路线（面板 1 和 2）。例如，如果您打开面板 1，然后打开 DOM 检查器，您将在面板 3 或面板 4 的插座中看到另一个面板 1 组件。
解决方法是从路由中删除不是实际路由的组件 - 'panel1' 和 'panel2'，并使用路由器和 [=28] 命名两个出口并定位这些出口=] 配置。
我正在使用 mat-accordion 和 router-outlet 并观察到一个奇怪的行为。下面是我的用例的示例实现。
https://stackblitz.com/edit/angular-material-accordion-with-router
在此示例中，面板 3 组件和面板 4 组件具有 router-outlet。
现在在第一次导航中它按预期工作。但是，如果我折叠这些面板并再次尝试打开它们，我会发现面板 4 的内容反映在面板 3 中。
我不确定这是 angular-router 中的错误还是我在这里做错了什么。
您将路线和出口与 non-routes 和组件混淆了。路由用于在出口中显示指定的组件，您的模板使用这些相同的组件。您应该只做其中之一 - 直接将组件放在模板中或使用路由将其显示在插座中。
您的模板将所有四个 'panel' 组件放在页面上，其中两个（3 和 4）定义了出口。因此，您的页面上有两个出口。由于它们未命名，它们都试图成为路由器的默认或 'primary' 插座，因此任何未指向命名插座的路由（这是您的所有路由）都会转到其中一个（或者两者兼而有之——我不知道 Angular 是如何处理这个问题的）。
您还在为不是路线的组件使用路线（面板 1 和 2）。例如，如果您打开面板 1，然后打开 DOM 检查器，您将在面板 3 或面板 4 的插座中看到另一个面板 1 组件。
解决方法是从路由中删除不是实际路由的组件 - 'panel1' 和 'panel2'，并使用路由器和 [=28] 命名两个出口并定位这些出口=] 配置。