1

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

  • 组件 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')组件，如下所示：

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

我试图实现辅助路由，并命名路由器插座，但我一定做错了，因为我无法让它工作。我可能无法正确理解内部工作原理。

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

4

1 回答 1

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

];

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

要从路由器配置中获取选项卡列表，请从ActivatedRoutedetails.component.ts 中列出

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'
}
于 2019-04-23T11:55:52.873 回答