Angular Material 15跨组件创建MatTabNav含tabPanel报错求解决方案

要解决这个跨组件绑定的问题，核心是把父组件中mat-tab-nav-panel的模板引用传递给子组件app-navigation，这里推荐使用**@Input输入属性**的方式，这是Angular父子组件间传递数据/引用的标准方案，具体实现步骤如下：

步骤1：在子组件中定义输入属性 #

修改NavigationComponent的TypeScript代码，添加一个@Input()属性来接收父组件传入的tabPanel引用：

import { Component, Input } from '@angular/core';
import { MatTabNavPanel } from '@angular/material/tabs';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent {
  // 定义输入属性，指定类型为MatTabNavPanel确保类型安全
  @Input() tabPanel!: MatTabNavPanel;
}

步骤2：父组件中传递模板引用 #

在父组件的模板里，把#tabPanel这个模板引用通过属性绑定传递给app-navigation组件：

<app-header></app-header>
<!-- 将父组件的tabPanel引用传递给子组件 -->
<app-navigation [tabPanel]="tabPanel"></app-navigation>

<div class="app-container">
  <mat-tab-nav-panel #tabPanel>
    <router-outlet></router-outlet>
  </mat-tab-nav-panel>
</div>

步骤3：子组件模板使用传入的引用 #

子组件的模板无需大改，直接使用组件类中定义的tabPanel输入属性绑定到mat-tab-nav-bar的[tabPanel]即可：

<nav mat-tab-nav-bar [tabPanel]="tabPanel">
  <a mat-tab-link [routerLink]="[link.path]" routerLinkActive="mat-tab-label-active" class="subnav-link">
    ...
  </a>
</nav>

补充说明 #

如果你的场景是非父子组件（比如组件层级更深或无直接父子关系），可以考虑通过Angular服务来共享tabPanel引用，但对于当前的父子层级结构，@Input是最简洁、高效的解决方案，能直接解决Property 'tabPanel' does not exist的报错，同时保证mat-tab-nav-bar能正确关联到对应的路由面板。

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