Angular Material 15迁移：如何将router-outlet放入mat-tab-nav-panel？

方法一：通过输入属性直接传递面板引用 #

这是最直接的方案，核心是将父组件中mat-tab-nav-panel的引用传递给包含mat-tab-link的子组件，并在子组件的mat-tab-nav-bar上绑定该引用。

1. 父组件模板修改：
   在父组件中给mat-tab-nav-panel添加模板引用变量#tabPanel，并将该引用通过输入属性传递给app-tabs组件：

   <div class="app-content">
    <div class="app-header">
     <app-header [title]="title"></app-header>
     <!-- 传递tabPanel引用给子组件 -->
     <app-tabs [tabs]="tabs" [tabPanel]="tabPanel"></app-tabs>
    </div>
   
    <section class="app-main">
      <!-- 定义mat-tab-nav-panel并包裹router-outlet -->
      <mat-tab-nav-panel #tabPanel><router-outlet></router-outlet></mat-tab-nav-panel>
    </section>
   </div>
   

2. 子组件（app-tabs）配置：
   在子组件的TS文件中定义类型为MatTabNavPanel的输入属性，并确保导入对应的类：

   import { Component, Input } from '@angular/core';
   import { MatTabNavPanel } from '@angular/material/tabs';
   
   @Component({
     selector: 'app-tabs',
     templateUrl: './app-tabs.component.html'
   })
   export class AppTabsComponent {
     @Input() tabs: any[];
     // 接收父组件传递的面板引用
     @Input() tabPanel: MatTabNavPanel;
   }
   

3. 子组件模板修改：
   在子组件的mat-tab-nav-bar上绑定[tabPanel]属性，关联到父组件传递的面板：

   <nav mat-tab-nav-bar [tabPanel]="tabPanel">
     <a mat-tab-link
        *ngFor="let tab of tabs"
        [routerLink]="tab.route"
        routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
       {{tab.label}}
     </a>
   </nav>
   

方法二：通过服务共享面板引用（解决初始化顺序问题） #

如果输入属性传递遇到初始化顺序导致的引用为空问题，可以通过服务来共享mat-tab-nav-panel的引用：

1. 创建TabPanel服务：

   import { Injectable, BehaviorSubject } from '@angular/core';
   import { MatTabNavPanel } from '@angular/material/tabs';
   
   @Injectable({ providedIn: 'root' })
   export class TabPanelService {
     private tabPanelSubject = new BehaviorSubject<MatTabNavPanel>(null);
     tabPanel$ = this.tabPanelSubject.asObservable();
   
     setTabPanel(panel: MatTabNavPanel): void {
       this.tabPanelSubject.next(panel);
     }
   }
   

2. 父组件中设置面板引用：
   使用ViewChild获取面板引用，并在视图初始化后通过服务传递：

   import { Component, ViewChild, AfterViewInit } from '@angular/core';
   import { MatTabNavPanel } from '@angular/material/tabs';
   import { TabPanelService } from './tab-panel.service';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app-root.component.html'
   })
   export class AppRootComponent implements AfterViewInit {
     @ViewChild('tabPanel') tabPanel: MatTabNavPanel;
     title = '你的页面标题';
     tabs = [/* 你的标签配置 */];
   
     constructor(private tabPanelService: TabPanelService) {}
   
     ngAfterViewInit(): void {
       // 视图初始化后传递面板引用
       this.tabPanelService.setTabPanel(this.tabPanel);
     }
   }
   

3. 子组件中订阅服务获取引用：

   import { Component, Input, OnInit } from '@angular/core';
   import { MatTabNavPanel } from '@angular/material/tabs';
   import { TabPanelService } from './tab-panel.service';
   
   @Component({
     selector: 'app-tabs',
     templateUrl: './app-tabs.component.html'
   })
   export class AppTabsComponent implements OnInit {
     @Input() tabs: any[];
     tabPanel: MatTabNavPanel;
   
     constructor(private tabPanelService: TabPanelService) {}
   
     ngOnInit(): void {
       this.tabPanelService.tabPanel$.subscribe(panel => {
         if (panel) {
           this.tabPanel = panel;
         }
       });
     }
   }
   

4. 子组件模板绑定：
   同方法一，在mat-tab-nav-bar上绑定[tabPanel]="tabPanel"即可。

关键注意事项 #

• 确保导入MatTabNavPanel类，避免类型不匹配导致的引用传递失败；
• mat-tab-nav-bar与mat-tab-nav-panel关联后，能自动提升无障碍性，屏幕阅读器会正确关联标签与对应的内容区域；
• 如果使用路由，确保routerLinkActive正确配置，保持标签的激活状态与路由同步。

内容的提问来源于stack exchange，提问作者dadadaa