如何在 mat-tab 中导航不同的子组件？（不在主要出口）

Question

我的 AppComponent 包含一个 sidenav 和一个 router-outlet。每个菜单项都允许我导航到不同的功能。每个 功能模块 有四个主要组件：

组件 1：列表 => url /feature/list
组件 2：详细信息 => url /feature/details/123
组件 3：编辑 => url /feature/edit/123
组件 4：添加 => url /feature/add

当我从 sidenav 单击某个功能时，默认情况下会显示该功能的列表组件。

在每个功能的列表组件上，我使用导航按钮导航到相应的 详细信息、编辑和 通过 URL 添加 组件，如下所示：this.router.navigateByUrl('/feature/details/123').

我的一个功能在 'details component' 中有一个 mat-tab-group。当我导航到该组件时（例如 /feature/details/123），我还希望能够单击某个选项卡并查看列表组件。但需要明确的是，我希望这个组件在选项卡中可见，而不是在主出口中。此列表应显示 table，其中包含来自 id:123 的一些数据。此外，这个嵌入式列表组件应该有不同的按钮，以允许我导航到其相应的详细信息、编辑和添加组件。

我已经尝试实现辅助路由，并命名为 router-outlets，但我一定是做错了什么，因为我无法让它工作。我可能没有正确理解内部工作原理。

有人可以解释一下我应该如何解决这个问题吗？如果有可能呢？

Answer 1

您可以将 DetailsComponent 映射到 /feature/details 路由，并将 :id 路由用作 details 路由的子路由。在 DetailsComponent 中，您将使用带有路由

的 material 选项卡

在路由模块中

const routes: Routes = [
  {
    path: 'feature',
    children: [
      {
        path: 'list',
        component: ListComponent
      },
      {
        path: 'details',
        component: DetailsComponent,
        children: [
          {
            path: ':id',
            component: TabIdComponent,
            data:
            {
              title: 'Detail',
            }
          },
          {
            path: 'list',
            component: ListComponent,
            data:
            {
              title: 'List',
            }
          },
          ...
          {
            path: '',
            redirectTo: 'list',
            pathMatch: 'full'
          },
        ]
      },
      ...
    ]
  }

];

在details.component.html

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

要从路由器配置中获取选项卡列表，您可以从 details.component.ts

中的 ActivatedRoute 中列出它

public tabs: Tab[];

constructor(activatedRoute: ActivatedRoute) {

    activatedRoute.paramMap.subscribe(value => {
      this.tabs = new List(activatedRoute.snapshot.routeConfig.children)
          .Where(r => r.path !== '')
          .Select(r => new Tab(r.path, r.data.title)).ToArray();
    });
  }


...

export class Tab {
    link: string;
    label: string;

    constructor(link: string, label: string) {
        this.label = label;
        this.link = link;
    }
}

如果您不希望 ListComponent 在主插座中加载（即使导航到 /feature/list 时也不），您可以将其重定向到 /feature/details/list 而不是为其定义组件使用

的路线

{
  path: 'list',
  redirectTo: 'details/list',
  pathMatch: 'full'
}

如何在 mat-tab 中导航不同的子组件？（不在主要出口）

How do I navigate different child components within a mat-tab? (not in primary outlet)

routing

router-outlet

angular

angular6

mat-tab

如何在 mat-tab 中导航不同的子组件？ （不在主要出口）

How do I navigate different child components within a mat-tab? (not in primary outlet)

routing

router-outlet

angular

angular6

mat-tab

如何在 mat-tab 中导航不同的子组件？（不在主要出口）