angular - 如何在子路由中实现带有 Angular Material 的路由选项卡？

Question

我想使用 Angular Material 选项卡 https://material.angular.io/components/tabs在选项卡中带有路由器导航。

我尝试使用 <nav mat-tab-nav-bar>如文档中所示，我找到了本教程:https://nirajsonawane.github.io/2018/10/27/Angular-Material-Tabs-with-Router/
我可以在哪里找到这样的模板:

<nav mat-tab-nav-bar>
  <a mat-tab-link
    *ngFor="let link of navLinks"
    [routerLink]="link.link"
    routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>
<router-outlet></router-outlet>

但问题是，我的选项卡不在我的应用程序的根目录中，而是在子路由的子模块中。我有类似的东西:

在应用程序路由模块中:

const routes: Routes = [
  ...
  { path: 'subpath', loadChildren: () => import('./path-to-module/submodule.module').then(m => m.SubmoduleModule) },
  ...
];

在 submodule-routing-module 我应该有类似的东西:

const routes: Routes = [
  { path: '', component: FirstTabComponent },
  { path: 'tab2', component: SecondTabComponent },
]

我想要的是，如果我去 url /subpath我看到选择了第一个选项卡的选项卡，如果我转到 url /subpath/tab2我看到选择了第二个选项卡的选项卡。

知道怎么做吗？

Answer 1

我也遇到了同样的问题。我克隆了Angular-Material-Tabs-with-Router但是用一个也有子组件的子组件对其进行了修改。

子组件被称为 home在 home.component.html它实现:

<nav mat-tab-nav-bar>
  <a mat-tab-link
  *ngFor="let link of navLinks"
  [routerLink]="link.link"
  routerLinkActive #rla="routerLinkActive"
  [active]="rla.isActive">
  {{link.label}}
  </a>
</nav>
<router-outlet></router-outlet>

这将创建 3 个名为 Notes 的选项卡。 , Photos和 Documents . Notes选项卡包括用于列出、查看、编辑和删除注释的其他组件。

我创建并将源添加到 GitHub 并将其导入到 Stackblitz:

GitHub

Stackblitz