Question

我有一个有角度的项目，其中有一个用于Tab的组件。现在，我试图使用菜单直接导航到每个选项卡。

main-tab.component.html

<nav mat-tab-nav-bar mat-align-tabs="center">
    <a
        mat-tab-link
        *ngFor="let link of navLinks"
        [routerLink]="[{ outlets: { Content: [link.path] } }]"
        routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
        {{link.label}}
    </a>
</nav>
<router-outlet name="Content"></router-outlet>

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/(container:home)', pathMatch: 'full'},
  { path: 'home', component: HomeComponent, outlet: 'container'},
  {
    path: 'Abc',
    component: AbcComponent,
    outlet: 'container',
    children: [
      { path: '', redirectTo: '/(container:Abc/(Content:Link1))', pathMatch: 'full'},
      { path: 'Link1', component: Link1, outlet: 'Content'},
      { path: 'Link2', component: Link2, outlet: 'Content'},
      { path: 'Link3', component: Link3, outlet: 'Content'},
      { path: 'Link4', component: Link4, outlet: 'Content'}
    ]
  },
  { path: '**', redirectTo: '/(container:home)', pathMatch: 'full'},
];

以上内容实际上是来自Angular材质示例的内容，因此没有问题。问题是，当我尝试添加以下菜单（通过标题上的按钮）时，它无法导航。

menu.component.html

<mat-menu #Menu="matMenu">
    <button mat-menu-item *ngFor="let link of navLinks" [routerLink]="[{ outlets: { Content: [link.path] } }]">{{link.label}}</button> 
</mat-menu>

是否可以直接在选项卡外部导航到Link2 / 3/4？

Answer 1

如果我是对的，则您正在尝试访问作为Abc子路径的Link1 / Link2。

如果是，则必须先进入ABC，然后进入子组件。

您不能直接访问：localhost：/ Link1。

您只能像localhost：/ Abc / Link1一样访问。

希望这会有所帮助。

如何从根目录导航到子路线？

1 个答案: