Angular中无法访问mat-sidenav-content内的模板变量

你遇到的@ViewChild和@ContentChild都无法获取目标元素的情况，原因如下：

• @ContentChild不适用：这个装饰器用于获取外部投影到当前组件的内容（即当前组件通过ng-content接收的内容），而你的#myDiv是当前组件自身模板内的元素，只是被投影到mat-sidenav-content组件中，因此完全不符合@ContentChild的使用场景，返回undefined是正常的。
• @ViewChild无法直接查询子组件投影内容：mat-sidenav-content是独立的Angular Material组件，你放在它标签内的内容会通过内容投影机制进入它的视图树，不属于当前组件的直接视图范围，因此@ViewChild无法直接捕获到#myDiv。

方案1：通过mat-sidenav-content引用间接查询DOM #

通过获取mat-sidenav-content的组件实例，再查询其内部DOM元素：

<mat-sidenav-container>
    <mat-sidenav opened="true" mode="side" #sidenav>
      <!-- navigation content here -->
    </mat-sidenav>
    <mat-sidenav-content #sidenavContent class="content-wrapper">
      <div class="test" #myDiv>test</div>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

import { MatSidenavContent } from '@angular/material/sidenav';
import { AfterViewInit, ViewChild } from '@angular/core';

export class MenuControllerComponent implements AfterViewInit {

  @ViewChild('sidenavContent') sidenavContent!: MatSidenavContent;
  private myDivElement?: HTMLElement;

  constructor(
    private responsive: BreakpointObserver,
    private navigationService: NavigationService
  ) {}

  ngAfterViewInit(): void {
    this.myDivElement = this.sidenavContent.nativeElement.querySelector('.test') as HTMLElement;
    // 切换CSS类示例
    this.myDivElement?.classList.toggle('target-class');
  }
}

方案2：通过组件自身ElementRef查询DOM #

直接从当前组件的根DOM节点查询目标元素：

import { ElementRef, AfterViewInit } from '@angular/core';

export class MenuControllerComponent implements AfterViewInit {

  private myDivElement?: HTMLElement;

  constructor(
    private el: ElementRef,
    private responsive: BreakpointObserver,
    private navigationService: NavigationService
  ) {}

  ngAfterViewInit(): void {
    this.myDivElement = this.el.nativeElement.querySelector('.test') as HTMLElement;
    this.myDivElement?.classList.toggle('target-class');
  }
}

方案3：用Angular响应式类绑定替代DOM操作（推荐） #

如果只是切换CSS类，完全不需要手动操作DOM，用Angular的[class]或ngClass绑定更符合框架设计理念：

<mat-sidenav-container>
    <mat-sidenav opened="true" mode="side" #sidenav>
      <!-- navigation content here -->
    </mat-sidenav>
    <mat-sidenav-content class="content-wrapper">
      <div class="test" [class.active]="isDivActive">test</div>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

export class MenuControllerComponent {
  isDivActive = false;

  toggleDivClass() {
    this.isDivActive = !this.isDivActive;
  }
}

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