Question

我想将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'},
];

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

/人/显示
/人/（显示// right：第一）
/人/（显示//右：第二个）
/人/（显示// right：第三）

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

<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为right:second 替换 right:third部分，而不是添加辅助URL

关于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 example，它很简单，可以重现我所描述的内容。

我可能错过了一些有关辅助路由的主要信息（或更笼统地说，关于Angular路由器和路由，这一点都不容易）。如果您有解决我的路由问题的想法，那就太好了。随意克隆我的stackblitz示例以显示一个有效的示例。如果需要更改模块和/或组件结构，则可以根据需要进行任意重构。复杂情况下的辅助路由确实缺少详细的文档，因此，如果您的答案可以包含某种解释，那就更棒了。

感谢所有阅读本文的人：-）

角辅助路由无法在模块内部工作

0 个答案: