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

Question

我的AppComponent包含sidenav和router-outlet。 每個菜單項允許我導航到不同的功能。 每個功能模塊都有四個主要組件：

• 組件1：list => url / feature / list
• 組件2：details => url / feature / details / 123
• 組件3：edit => url / feature / edit / 123
• 組件4：add => url / feature / add

當我從sidenav單擊某個功能時，默認情況下我會看到功能列表組件。

在每個功能的列表組件上，我使用導航按鈕導航到相應的詳細信息 ，通過URL 編輯和添加組件，如下所示： this.router.navigateByUrl('/feature/details/123') 。

我的一個功能在其“詳細信息組件”中有一個mat-tab-group 。 當我導航到此組件（例如/feature/details/123 ）時，我還希望能夠單擊某個選項卡並查看列表組件。 但要明確的是，我希望此組件在選項卡中可見，而不是在主要插座中。 此列表應顯示一個表，其中包含來自id：123的一些數據。 此嵌入式列表組件也應具有不同的按鈕，以允許我導航到其相應的詳細信息，編輯和添加組件。

我試圖實現輔助路由，並命名路由器插座，但我一定做錯了，因為我無法讓它工作。 我可能不理解正確的內部工作。

有人可以解釋我應該如何解決這個問題？ 如果它甚至可能嗎？

Answer 1

您可以將DetailsComponent映射到/feature/details路由，並使用:id route作為詳細信息路由的子路由。 在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'
          },
        ]
      },
      ...
    ]
  }

];

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