如何在子路径中使用角材料实现路由选项卡?

问题描述

我想使用 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> 如文档中所示，我找到了本教程:https://nirajsonawane.github.io/2018/10/27/Angular-Material-Tabs-with-Router/我在哪里可以找到这样的模板:

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:

在应用路由模块中:

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

这篇关于如何在子路径中使用角材料实现路由选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！