我的网址是 localhost:port/home 当我点击 mat 标签页时,我希望将地址调整为 home/secondTab、home/thirdTab 或 home/firstTab。基于这个设置,我本来期望应该可以实现,但实际上它没用。
我想构建一个路由,在告诉路由器 router.navigate(['home/secondTab']) 时,他会加载 Home 组件和 secondTab 组件,并且用户会看到 secondTab 处于焦点状态。
任何子路由(例如 home/secondTab)都似乎无法工作,单击时 URL 没有更新,而当我手动输入 home/secondTab 时,HomeComponent 被加载。总之,什么都不起作用,我找不到与所有人都使用 nav mat + mat-tab-link 相同设置的示例。
我对前端开发相当新手,官方文档对我来说并不是很清晰。 在这种情况下,我需要为每个组件创建一个路由模块吗?还是可以在 app-routing 中完成所有操作? 我想要的东西是否可能在我当前的设置中实现,或者我漏掉了什么? 感谢您的帮助。
对于那些指向 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 { }