0

我有以下情况。我有两个组件，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'。

是什么导致了这个错误，有什么方法可以解决这个问题？

4

1 回答 1

0

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

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

这是CodeSandBox中的一个快速演示，您可以使用它来玩弄并更好地了解绝对和相对路径是如何工作的。

于 2018-06-05T08:22:58.900 回答