Angular Material复用Toolbar与Sidenav组件触发侧边栏时报编译错误

Angular 的组件模板是独立隔离的作用域，每个组件的模板只能访问自身类中定义的属性、方法，以及当前模板内声明的局部引用变量，完全无法跨组件直接访问父组件模板里的DOM元素引用（也就是你在 AppComponent 模板中通过 #sidenav 声明的侧边栏实例）。这就是为什么在 Toolbar 组件模板中写 (click)="sidenav.toggle()" 会触发“Property 'sidenav' does not exist”的编译错误——对于 Toolbar 组件的编译流程来说，它根本不知道父组件模板里有这个变量存在。

我们可以通过Angular标准的组件通信机制打破作用域隔离，同时保持两个组件的独立复用能力，下面是两种经过项目验证的实现方式：

方案1：通过@Output自定义事件向上通信（推荐，解耦性最好） #

核心逻辑：Toolbar 组件不直接操作侧边栏，只负责在菜单按钮被点击时向外抛出自定义事件，由父组件 AppComponent 自行处理侧边栏的开合逻辑。

实现步骤 #

1. 修改 Toolbar 组件的类代码，新增自定义输出事件

// src/app/toolbar/toolbar.component.ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.css']
})
export class ToolbarComponent implements OnInit {
  // 定义自定义事件，点击菜单按钮时向外抛出通知
  @Output() menuClick = new EventEmitter<void>();

  constructor() {}
  ngOnInit(): void {}

  lightMenu = false;
  invertMenuColor() {
    this.lightMenu = !this.lightMenu;
    console.log("LightMenu: " + this.lightMenu);
  }

  // 菜单按钮点击的内部处理方法
  onMenuButtonClick() {
    this.menuClick.emit();
  }
}

2. 修改 Toolbar 组件的模板，替换原来跨作用域的调用逻辑

<!-- src/app/toolbar/toolbar.component.html -->
<mat-toolbar color="primary">
    <button mat-icon-button 
      class="example-icon menu-icon" 
      aria-label="Example icon-button with menu icon"
      (click)="onMenuButtonClick()"
    >
      <mat-icon>menu</mat-icon>
    </button>

    <span class="example-spacer"></span>
    <span style="display: block; text-align: center">Company Logo Here</span>
    <span class="example-spacer"></span>
    
    <button mat-icon-button
      class="example-icon color-icon"
      aria-label="Example icon-button with color choice icon"
      (click)="invertMenuColor()"
    >
      <mat-icon>invert_colors</mat-icon>
    </button>
</mat-toolbar>

3. 修改 AppComponent 的类代码，封装侧边栏开合的处理方法

// src/app/app.component.ts
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})
export class AppComponent {
  opened: boolean;

  // 统一处理侧边栏开合的逻辑
  toggleSidenav() {
    this.opened = !this.opened;
  }
}

4. 修改 AppComponent 的模板，将 Toolbar 抛出的自定义事件和父组件的处理方法绑定

<!-- src/app/app.component.html -->
<mat-sidenav-container>
    <mat-sidenav #sidenav mode="over" [(opened)]="opened">
        <app-sidenav></app-sidenav>
    </mat-sidenav>
    <mat-sidenav-content>
    <!-- 绑定Toolbar的菜单点击事件，触发侧边栏开合 -->
    <app-toolbar (menuClick)="toggleSidenav()"></app-toolbar>

    <div align="center">
      <h1 redColored>Understanding Angular</h1>
    </div>
    <button (click)="toggleSidenav()">切换侧边栏</button>
    <h2> Router Views </h2>
    <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

方案优势：Toolbar 组件完全不需要感知侧边栏的存在，不管被复用到哪个页面，只要父组件监听menuClick事件实现对应的处理逻辑即可，完全符合组件解耦的设计原则，长期维护成本最低。

方案2：将侧边栏实例通过@Input传入Toolbar组件 #

核心逻辑：将父组件模板中已经获取到的 sidenav 实例，作为输入参数直接传递给 Toolbar 组件，让 Toolbar 可以合法访问到侧边栏对象的方法。

实现步骤 #

1. 修改 Toolbar 组件的类代码，新增输入属性接收侧边栏实例

// src/app/toolbar/toolbar.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.css']
})
export class ToolbarComponent implements OnInit {
  // 定义输入属性，接收父组件传入的侧边栏实例
  @Input() sidenav?: MatSidenav;

  constructor() {}
  ngOnInit(): void {}

  lightMenu = false;
  invertMenuColor() {
    this.lightMenu = !this.lightMenu;
    console.log("LightMenu: " + this.lightMenu);
  }
}

2. Toolbar 组件的模板几乎不需要改动，原来的sidenav.toggle()逻辑现在可以被正常识别——因为sidenav已经是 Toolbar 类中通过@Input声明的合法属性：

<!-- src/app/toolbar/toolbar.component.html -->
<mat-toolbar color="primary">
    <button mat-icon-button 
      class="example-icon menu-icon" 
      aria-label="Example icon-button with menu icon"
      (click)="sidenav?.toggle()"
    >
      <mat-icon>menu</mat-icon>
    </button>
    <!-- 其余原有模板逻辑保持不变 -->
</mat-toolbar>

3. 修改 AppComponent 的模板，把侧边栏实例传递给 Toolbar 组件

<!-- src/app/app.component.html -->
<mat-sidenav-container>
    <!-- 注意需要加上="matSidenav"导出标记，否则拿到的是原生DOM元素，无法调用toggle方法 -->
    <mat-sidenav #sidenav="matSidenav" mode="over" [(opened)]="opened">
        <app-sidenav></app-sidenav>
    </mat-sidenav>
    <mat-sidenav-content>
    <!-- 将侧边栏实例传入Toolbar组件 -->
    <app-toolbar [sidenav]="sidenav"></app-toolbar>
    <!-- 其余原有模板逻辑保持不变 -->
    </mat-sidenav-content>
</mat-sidenav>

实现注意：获取MatSidenav实例时，模板引用变量必须加上="matSidenav"导出标记，否则拿到的是原生HTMLElement，没有toggle()方法的实现。

方案特点：代码改动量小，实现直接，但是Toolbar组件会和Material Sidenav的类型产生依赖，复用灵活性比方案1稍弱，适合Toolbar只在全局侧边栏布局中使用的场景。

不要尝试在 Toolbar 组件内部通过 @ViewChild 直接查询父组件的侧边栏DOM元素，这种写法完全破坏了组件的封装边界，后期页面结构调整时很容易出现难以排查的问题，维护成本极高。

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