2

我想将 Angular 辅助路由用于（非常大的）管理工具侧菜单（使用 7.2.X Angular 分支）。经过几天对极其复杂的 Angular 路由器的测试，我可以使 URL 正常工作。但是当我尝试在辅助插座中的组件之间进行路由时，我有非常奇怪的行为......

我从设计师那里得到的应用程序草图非常标准：一个通用的固定菜单在上半部分，一个动态侧边菜单在左边，第二个动态侧边菜单在右边。

我的应用程序路由模块目前类似于：

const appRoutes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'person', component: MainComponent, loadChildren: 'app/person/person.module#PersonModule'},
  // several other modules, some eager loaded, other lazy loaded
  {path: '**', redirectTo: '/login'}
];

MainComponent 包含不同模块的主要和命名路由器出口：

<div class="main-container">
  <div class="left-container">
    <router-outlet name="left"></router-outlet>
  </div>
  <div class="middle-container">
    <router-outlet></router-outlet>
  </div>
  <div class="right-container">
    <router-outlet name="right"></router-outlet>
  </div>
</div>

和人员模块路由：

const PERSON_ROUTES: Routes = [
  {path: 'display', component: PersonDisplayComponent},
  {path: 'first', component: MenuTestFirstComponent, outlet: 'right'},
  {path: 'second', component: MenuTestSecondComponent, outlet: 'right'},
  {path: 'third', component: MenuTestThirdComponent, outlet: 'right'},
  {path: '', component: MenuTestFirstComponent, outlet: 'right'},
  {path: '' pathMatch: 'full', redirectTo: 'display'},
];

所有这些路由都正常工作（由于默认的辅助路由，两个第一个确实显示相同的东西）：

  • /人/显示
  • /人/（显示//右：第一）
  • /人/（显示//右：秒）
  • /人/（显示//右：第三）

现在，解决问题！我需要在这些菜单之间进行路由（首先有一个链接到第二个路由，第二个有一个链接到第三个路由）。我放置在菜单组件中的代码如下（这里是第一个，但在第二个中类似于路由到第三个）：

<p><a [routerLink]="[{outlets:{right:['second']}}]">Second (routerLink)</a></p>
<p><a (click)="routeToSecond()">Second (route.navigate)</a></p>

在 TS 中：

public routeToSecond(){
  this.router.navigate([
    {
      outlets: {
        right: ['second'],
      }
    }
  ]);
}

问题是，当我打开时/person/display，第一个菜单（这是默认菜单）正在正确显示。路由的routerLink方式是适当地添加一个链接到/person/(display//right:second). 但是，(clic)路由的方式会出现路由器错误：

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'second'
Error: Cannot match any routes. URL Segment: 'second'

我要求去routerLink和去的路线router.navigate是完全相同的，但是到目前为止，一种路由方式是有效的，而后者不是。

第二个问题是，当我打开时/person/(display//right:second)，到第三个的链接都没有工作。生成的链接routerLink很奇怪：

/person/(display//right:second/(right:third))

我希望替换部分而不是添加routerLink部分到辅助 URL。right:secondright:third

关于router.navigate路由，我收到类似的错误：

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'third'
Error: Cannot match any routes. URL Segment: 'third'

我通过谷歌搜索找到的大多数辅助路由示例与我的用例有很大不同。它们要么过于简单（通常只有一个 AppModule），要么到辅助出口的路由链接在模块之外（在 AppModule 的组件中）。

就我而言，侧边菜单中的操作可以更改菜单的内容，而不仅仅是顶级静态菜单。

我准备了一个尽可能简单的stackblitz 示例来重现我所描述的内容。

我可能错过了一些关于辅助路由的主要信息（或者更一般地关于 Angular 路由和路由的信息，这根本不容易）。如果您有任何想法来解决我的路由问题，那就太棒了。随意克隆我的 stackblitz 示例以显示一个工作示例。如果您需要更改模块和/或组件结构，请尽可能多地重构。复杂情况下的辅助路由确实缺乏详细的文档，所以如果你的答案可以包含某种解释，那就更棒了。

感谢所有阅读到这一点的人:-)

4

0 回答 0