Question

我有以下情况。我有两个组件InvLoginComponent和InvDashboardComponent，它们安装在＆＃34; primary＆＃34;我的应用程序中的（或无名的）路由器。用户登录并路由到仪表板组件。在仪表板内部，我有一个带有链接的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'。

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

Answer 1

几乎你有两个问题，首先是路由器链接需要一些字符串，这表示用户将被重定向的地方，因此你必须（如评论中所述）使用[routerLink]="c.href"代替[routerLink]=[{outlets : {casesOutlet:[c.ref]}}]。

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

以下是CodeSandBox中的快速演示，您可以使用它来更好地了解绝对和相对路线的工作原理。

使用多个出口的Angular 6路由

1 个答案: