时间戳

首页 > 解决方案 > 如何在子路由中实现带有角度材料的路由选项卡？

angular - 如何在子路由中实现带有角度材料的路由选项卡？

问题描述

我想在选项卡中使用带有路由器导航的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我会看到选择了第二个选项卡的选项卡。

知道怎么做吗？

标签： angularangular-materialangular-router

解决方案

我也遇到了同样的问题。我克隆了 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

堆栈闪电战

推荐阅读