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

Question

我的AppComponent包含一个sidenav和一个路由器出口。每个菜单项都允许我导航到不同的功能。 每个功能模块具有四个主要组件：

• 组件1：列表=> url /功能/列表
• 组件2：详细信息=> url / feature / details / 123
• 组件3：edit => url / feature / edit / 123
• 组件4：添加=>网址/ feature / add

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

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

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

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

有人可以解释一下我该如何解决吗？甚至有可能吗？

Answer 1

您可以将DetailsComponent映射到/feature/details路由，并将:id路由用作Details路由的子级。在DetailsComponent中，您可以将材料选项卡用于工艺路线

在路由模块中

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'
          },
        ]
      },
      ...
    ]
  }

];

in 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'
}