使用多个插座的 Angular 6 路由答案

【问题标题】：Angular 6 Routing using Multiple Outlets使用多个插座的 Angular 6 路由
【发布时间】：2018-11-14 13:17:21
【问题描述】：

我有以下情况。我有两个组件，InvLoginComponent 和 InvDashboardComponent，它们安装在我的应用程序的“主”（或无名）路由器上。用户登录并被路由到仪表板组件。在仪表板内部，我有一个带有链接的 sidenav。单击链接时，我想将相关组件加载到InvDashSidenavComponent 内的命名路由器出口内，该出口嵌套在InvDashboardComponent 中。到目前为止，代码如下所示：

app.module.ts

// Routes
const routes: Routes = [
  {path: "", redirectTo: "login", pathMatch: "full"},
  {path: "login", component: InvestigatorLoginComponent },
  {path: "dashboard", component: InvDashboardComponent },
  {path: "pending", component: PendingCasesComponent, outlet:'casesOutlet' },
  {path: "completed", component: CompletedCasesComponent, outlet: 'casesOutlet'}, 
  {path: "flagged", component: FlaggedCasesComponent, outlet: 'casesOutlet' }
];
// ... in imports
RouterModule.forRoot(
  routes, { enableTracing: false} // <= debugging
),
// ... rest of app.module.ts

app.component.ts

<router-outlet
(activate)="activateHandler($event)"
(deactivate)="deactivateHandler($event)"
></router-outlet> <!-- Nameless or primary outlet -->

inv-dash-sidenav.component.ts

caseRoutes = [
{ name: 'Pending', href: 'pending' },
{ name: 'Completed', href: 'completed' },
{ name: 'Review', href: 'review' },
{ name: 'Flagged', href: 'flagged' }
]; // used in the template for binding to routerLink

inv-dash-sidenav.component.html

<mat-nav-list *ngIf="showCases">
    <a mat-list-item *ngFor="let c of caseRoutes">
      <a [routerLink]="[{ outlets: {casesOutlet:[c.href] } }]" routerLinkActive="active">{{ c.name }}</a>
    </a>
</mat-nav-list>
<!-- Later in the template -->
<router-outlet name="casesOutlet"></router-outlet>

当我运行应用程序时，会发生以下情况： 1.仪表板和所有其他非sidenav组件像以前一样加载。 2. 从切换按钮触发 sidenav 后，sidenav 像往常一样滑入。 3.点击链接时，收到如下错误信息：Error: Cannot match any routes. URL Segment: 'dashboard'。

导致此错误的原因以及解决此问题的方法是什么？

【问题讨论】：

我认为你应该将[{ outlets: {casesOutlet:[c.href] } }] 替换为[routerLink]="c.href"
@ХристиянХристов 我试过了。现在它给出了以下错误：Error: Cannot match any routes. URL Segment: 'dashboard/pending

标签： angular angular-routing angular-router angular-routerlink

【解决方案1】：

您几乎有两个问题，首先是路由器链接需要一些字符串，该字符串指示用户将被重定向的位置，因此您必须（如 cmets 中所述）使用 [routerLink]="c.href" 而不是 @ 987654323@.

所以现在您有以下错误，即Error: Cannot match any routes. URL Segment: 'dashboard/pending，这是因为您使用的是相对路径而不是绝对路径，修复如下：而不是[routerLink]="c.href" 执行[routerLink]="'/'+c.href"。使用斜杠时，您正在访问绝对路径，换句话说，您正在从根目录构建路径，而当您使用不带“/”的routerLink 时，您正在构建相对路径，这意味着您正在连接的地方你想去与当前位置。例如，如果您在路径“仪表板”上并单击指向pending（无斜杠）的路由器链接，您将被重定向到路径dashboard/pending（在您的情况下，您没有在路由器中提供），因此，如果您想修复它，您只需修改 pending=>/pending 以便您将被重定向到路径 pending （在您的情况下，这是您支持的路线之一）。

这是CodeSandBox 中的一个快速演示，您可以通过它玩转并更好地了解绝对和相对路径的工作原理。

【讨论】：