Angular 路由 - 嵌套路由器插座(一个主插座 + 两个命名插座) - 导航到第三个路由器插座时出错
Angular Routing - Nested router outlets (One main + two named outlets) - Error on navigating to third router-outlet
我对嵌套路由器插座有疑问。
我有三个路由器插座,其中两个被命名。
第二个路由器插座嵌套在主路由器插座内。第三个路由器插座嵌套在第二个路由器插座内。
所有路由器插座都通过不同的模块分开。
但是,当我尝试导航以激活第三个路由器插座时,我总是收到一条错误消息,提示该路线不存在。
我在 stackblitz 上创建了一个示例:Example link
第二个路由器出口工作得很好,正如您在 "Overview" 路由中看到的那样。 "Command Options" 路由出现问题。初始路线工作正常,但是当您单击 "Permissions" 时,将显示错误。
实际上在这种情况下您不需要命名路由器插座。你可以在没有命名路由器插座的情况下实现这一点。可以参考
https://medium.com/@aakashgarg19/the-art-of-nested-router-outlets-in-angular-dafb38245a30
了解没有命名路由器插座的嵌套路由。
如果您仍想使用命名商店,请使用 router.navigate 语句,如下所示:-
this.router.navigate(["app",{ outlets: {server: ["commandOptions", {outlets: {"commandOptions": ["permissions"] }}]}}]);
我对嵌套路由器插座有疑问。 我有三个路由器插座,其中两个被命名。
第二个路由器插座嵌套在主路由器插座内。第三个路由器插座嵌套在第二个路由器插座内。
所有路由器插座都通过不同的模块分开。 但是,当我尝试导航以激活第三个路由器插座时,我总是收到一条错误消息,提示该路线不存在。
我在 stackblitz 上创建了一个示例:Example link
第二个路由器出口工作得很好,正如您在 "Overview" 路由中看到的那样。 "Command Options" 路由出现问题。初始路线工作正常,但是当您单击 "Permissions" 时,将显示错误。
实际上在这种情况下您不需要命名路由器插座。你可以在没有命名路由器插座的情况下实现这一点。可以参考
https://medium.com/@aakashgarg19/the-art-of-nested-router-outlets-in-angular-dafb38245a30
了解没有命名路由器插座的嵌套路由。
如果您仍想使用命名商店,请使用 router.navigate 语句,如下所示:-
this.router.navigate(["app",{ outlets: {server: ["commandOptions", {outlets: {"commandOptions": ["permissions"] }}]}}]);