Angular Mat-Tab-Group 如何使用 routerLink 导航

Question

Angular Mat-Tab-Group 如何使用 routerLink 导航

3

我的网址是 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 { }

- dfbenny

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Janitha Rasanga · Accepted Answer

你可以这样做。通过路由参数传递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;
    }

我只是提供给你想法和定制你所需的代码。