问题描述
我的网址是 localhost:port/home 当我单击 mat 选项卡时,我想将 url 调整为 home/secondTab、home/thirdTab 或 home/firstTab。我本来可以通过这种设置来实现的,但它不起作用。
我想构建一个路由,目标是当我告诉路由器到 router.navigate(['home/secondTab'],他加载 homecomponent 和 secondTabComponent 并且用户将 secondTab 设为焦点。
子路由(home/secondTab)似乎都不起作用,url 永远不会在点击时更新,当我自己输入 home/secondTab url 时,HomeComponent 被加载。 所以简而言之,没有任何工作,也找不到任何具有相同设置的示例,因为每个人都在使用导航垫 + mat-tab-link
我对前端开发还很陌生,官方文档对我来说不是很清楚。 每个组件都需要一个路由模块吗?或者我可以在此设置中的应用程序路由中全部完成吗? 我拥有的设置可能是我想要的还是我遗漏了什么? 感谢您的投入。
对于那些指向 nav mat + mat-tab-link 的人,由于其他流程以这种方式工作,我无法像这样重构它。
home.html
<mat-tab-group (selectedTabChange)="selectedTabChanged($event)" >
<mat-tab label="FirstTab" >
<app-FirstTab></app-FirstTab>
</mat-tab>
<mat-tab label="SecondTab" >
<app-SecondTab></app-SecondTab>
</mat-tab>
<mat-tab label="ThirdTab" >
<app-ThirdTab></app-ThirdTab>
</mat-tab>
</mat-tab-group>
home.ts
selectedTabChanged(event: any){
if(event.index == 0){
this.Service.refreshTab();
}
if(event.index == 1){
this.Service.makeApiCall();
}
if(event.index == 2){
}
}
navigation.html
<div>
<strong [routerLink]="['home/secondTab']" >
</strong>
</div>
app-routing.ts
const routes: Routes = [
Shell.childRoutes([
{ path: '',redirectTo: '/login',pathMatch: 'full' },//works
{ path: 'home',component: HomeComponent },//works
{ path: 'home/secondTab',component: SecondTabComponent } //loads HomeComponent
//OR
{ path: 'home/secondTab',component: HomeComponent,loadChildren: () =>
import ('./home/Second/Second.cmpnt').then(m => m.SecondTabComponent) }
])
];
@NgModule({
imports: [RouterModule.forChild(routes)],exports: [RouterModule],providers: []
})
export class HomeRoutingModule { }
解决方法
你可以做这样的事情。通过路由器参数传递FirstTab、secondTab 或thirdTab。
然后你可以订阅 paramMap 并且可以写一些这样的东西。
<mat-tab-group [(selectedIndex)]="demo1TabIndex" (selectedTabChange)="selectedTabChanged($event)" >
<mat-tab label="FirstTab" >
<app-FirstTab></app-FirstTab>
</mat-tab>
<mat-tab label="SecondTab" >
<app-SecondTab></app-SecondTab>
</mat-tab>
<mat-tab label="ThirdTab" >
<app-ThirdTab></app-ThirdTab>
</mat-tab>
</mat-tab-group>
...
public demo1TabIndex = 1;
ngOnInit() {
this.route.paramMap.subscribe(params => {
let tabName = params.get('tabn;ame')
let _index = 1;
if(tabName == 'FirstTab'){
this.index = 1;
}
if(tabName == 'secondTab'){
this.index = 2;
}
if(tabName == 'thirdTab '){
this.index = 3;
}
this.demo1TabIndex = _index;
}
我只是给你想法和定制你想要的代码。