使用多个出口的Angular 6路由-Java 学习之路

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

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

1 回答

0

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

所以现在你有以下错误，即 Error: Cannot match any routes. URL Segment: 'dashboard/pending ，这是因为你使用的是相对路径而不是absoulte，修复方法如下：而不是 [routerLink]="c.href" 做 [routerLink]="'/'+c.href" . 使用斜杠时，您正在访问绝对路径，换句话说，您正在从根构建路径，当您使用 routerLink 而没有'/'时，您正在构建相对路径，这意味着您正在连接您想要去的地方目前的位置 . 例如，如果您在路径'dashboard'并单击路由器链接，导致 pending （没有斜杠），您将被重定向到路径 dashboard/pending （在您的情况下，您不在路由器中提供），所以如果您想要修复你只需要修改 pending => /pending ，这样你就可以被重定向到路径 pending （在你的情况下是你支持的路由上的） .

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

回复于 2024-05-03T15:27:42+08:00

使用多个出口的Angular 6路由

1 回答

相关问题