如何在子路径中使用角形材料实施路径制表符? [英] How to implement routed tabs with angular material, within a child route?

问题描述

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

I want to use Angular Material tabs https://material.angular.io/components/tabs with a router navigation in the tabs.

我尝试按照文档中的说明使用< nav mat-tab-nav-bar> ，然后找到了本教程:

I tried to use <nav mat-tab-nav-bar> as indicated in the doc, and I found this tutorial: https://nirajsonawane.github.io/2018/10/27/Angular-Material-Tabs-with-Router/ where I can find a template like that:

<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>

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

But the problem is, that my tabs are not at the root of my application, but are in a submodule in a child route. I have something like that:

在应用程序路由模块中:

In app-routing-module:

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

在submodule-routing-module中，我应该有类似的内容:

In submodule-routing-module I should have something like that:

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

我想要的是，如果我转到url /subpath ，则看到带有第一个选项卡的选项卡，如果我转到url /subpath/tab2 我看到选择了第二个标签的标签.

What I would like is that, if I go to url /subpath I see the tabs with the first tab selected, and if I go to url /subpath/tab2 I see the tabs with the second tab selected.

有什么想法吗?

推荐答案

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

I, too, ran into the same issue. I cloned Angular-Material-Tabs-with-Router but modified it with a child component that also has child components.

子组件称为 home ，并在 home.component.html 中实现:

The child component is called home and in home.component.html it implements:

<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 (注释)标签包含用于列出，查看，编辑和删除注释的其他组件.

This creates 3 tabs called Notes, Photos and Documents. The Notes tab includes additional components to list, view, edit and delete notes.

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

I created and added the source to GitHub and imported it to Stackblitz:

GitHub

Stackblitz

这篇关于如何在子路径中使用角形材料实施路径制表符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！