Angular 15升级后MatButton不存在_getHostElement属性的问题咨询

原因分析 #

_getHostElement是Angular Material组件内部的私有方法（以下划线开头命名，属于框架内部实现细节），Angular 15对Material组件的内部结构进行了重构，移除了这个私有方法。这类私有API原本就不对外暴露，官方不会保证跨版本兼容性，所以升级时出现这类报错是预期的——依赖私有API的代码本就存在版本兼容风险。

修复方案 #

方案1：通过ElementRef直接获取原生DOM元素 #

修改组件代码，直接获取MatButton对应的原生宿主元素：

import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
import { MatButton } from '@angular/material/button';

@Component({
  selector: 'ae-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
})
export class Button {
  // 新增read: ElementRef参数，获取原生元素引用
  @ViewChild('btn', { static: true, read: ElementRef }) buttonRef: ElementRef<HTMLElement>;
  
  {...}
  ngOnInit() {
    // 直接操作原生元素的classList
    this.buttonRef.nativeElement.classList.add('ae-btn');
  }
  {...}
}

方案2：通过CSS样式实现（更推荐） #

如果只是为了添加自定义类名，完全可以通过CSS完成，避免直接操作DOM：
在button.component.scss中添加：

// 若模板结构是ae-button直接包裹mat-button，可直接使用子选择器
:host > mat-button {
  @extend .ae-btn;
}

// 或者针对特定类型的MatButton调整选择器
:host > mat-raised-button {
  @extend .ae-btn;
}

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