如何在mat选项卡中导航不同的子组件？(不在主出水口)
我的AppComponent包含一个sidenav和一个路由器出口.每个菜单项允许我导航到不同的功能。每个功能模块有四个主要组件：
- 组件1:列表=> url /feature/list
- 组件2: details => url /feature/details/123
- 组件3:编辑=> url /feature/编辑/123
- 组件4:添加=> url /feature/add
当我单击sidenav中的一个特性时，默认情况下我会显示这些特性的列表组件。
在每个特性的列表组件上，我使用导航按钮导航到相应的details、编辑和通过URL添加组件，如：this.router.navigateByUrl('/feature/details/123')。
我的一个特性在'details组件‘中有一个mat-tab-group。当我导航到这个组件(例如/feature/details/123)时，我也希望能够单击一些选项卡，并看到一个列表组件。但为了清楚起见，我希望这个组件在选项卡中可见，而不是在主插座中。这个列表应该显示一个表，其中包含id:123中的一些数据。此外，这个嵌入式列表组件应该有不同的按钮，允许我导航到它的相应细节，编辑和添加组件。
我试图实现辅助路由，并命名为路由器-插座，但我一定是做错了什么，因为我只是不能让这件事。我可能不太明白内在的运作方式。
有人能解释一下我该怎么处理这个问题吗？如果有可能的话？
回答 1
Stack Overflow用户
发布于 2019-04-23 03:55:52
您可以将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>`要从路由器配置中获取选项卡列表，您可以从details.component.ts中的details.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'
}https://stackoverflow.com/questions/55762515
复制
腾讯云开发者
