Angular Mat-Tab-Group Navigation with routerLink

Question

我的 url 是 localhost:port/home 當我單擊墊選項卡時，我想將 url 調整為 home/secondTab、home/thirdTab 或 home/firstTab。 我本來希望使用此設置，但它不起作用。

我想構建一個路由，目標是當我告訴路由器 router.navigate(['home/secondTab'] 時，他加載 homecomponent 和 secondTabComponent 並且用戶將 secondTab 作為焦點。

子路由（home/secondTab）似乎都不起作用，url 在點擊時永遠不會更新，當我自己鍵入 home/secondTab url 時，HomeComponent 會被加載。 所以簡而言之，沒有任何效果，也找不到與每個人都使用 nav mat + mat-tab-link 相同的設置示例

我對前端開發很陌生，官方文檔對我來說不是很清楚。 每個組件都需要一個路由模塊嗎？ 或者我可以在此設置中的應用程序路由中全部完成它們嗎？ 是否有可能通過我擁有的設置獲得我想要的東西，或者我錯過了什么？ 感謝您的輸入。

對於那些指向 nav mat + mat-tab-link 的人，由於其他流程以這種方式工作，我無法像那樣重構它。

主頁.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>

主頁.ts

selectedTabChanged(event: any){
    if(event.index == 0){ 
      this.Service.refreshTab();        
    }

    if(event.index == 1){ 
        this.Service.makeApiCall();  
    }

    if(event.index == 2){ 
 
    }
}

導航.html

<div>
    <strong [routerLink]="['home/secondTab']" >
    </strong>
</div>

應用程序路由.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 { }

Answer 1

你可以做這樣的事情。 通過路由器參數傳遞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;
    }

我只是給你想法並定制你想要的代碼。