Question

我设置了两个路由器，其中一个是延迟加载的，用于访问父路由的子路由。这里的目标是要有一些高级路由，这些路由本质上是完全不相关的页面，并且其中一些页面具有自己的子路由，可在其中使用选项卡进行导航。

子路线：

const dashboardRoutes = [
    {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
    {path: 'dashboard', component: DashboardContainerComponent, children:[
       {path: 'home', component: DashboardComponent, outlet: 'dashboard'},
    ]
];

@NgModule({
  imports: [
    RouterModule.forChild(dashboardRoutes)
  ],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

父母路线：

const routes: Routes = [
    {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
    {path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule'}
]

  @NgModule({
    imports :[
      RouterModule.forRoot(routes, {useHash: true})
    ],
    exports: [
      RouterModule
    ]
  })
export class RoutingModuleModule { }

当我在地址栏中输入路径时，这可以正常工作： http://localhost:4200/#/dashboard/dashboard/(dashboard:home)

但是，当我尝试使用“材质标签”导航时，我得到：Error: Cannot match any routes. URL Segment: 'dashboard/dashboard/%28dashboard:home%29'

在我的组件中，我有：

navlinks = [
    {path: '(dashboard:home)', label: 'Home'}
]

html：

<nav mat-tab-nav-bar mat-align-tabs="center">
    <a mat-tab-link
    *ngFor="let link of navlinks"
    [routerLink]="link.path"
    routerLinkActive #rla="routerLinkActive"
    [routerLinkActiveOptions]="{exact: true}"
    [active]="rla.isActive">
    {{link.label}}
</a>
</nav>

<router-outlet name="dashboard"></router-outlet>

从本质上讲，这似乎是正确的东西，但是在某些时候，括号很可能已被替换。

我尝试了几种变体，例如没有括号，斜杠等，但是都没有产生期望的结果。

有人对我的链接列表中的值有何建议吗？

带有辅助路线的Angular 6材质选项卡导航

0 个答案: