Angular 8升级至14后[hidden]属性失效问题求助

从Angular 8升级到14后，MatCheckbox组件的[hidden]属性无法控制显示状态——无论设为true或false，组件始终处于显示状态。这是因为Angular Material迭代中调整了组件样式优先级，[hidden]的默认样式规则被组件自身样式覆盖。以下是几种可行的解决方法：

方法1：使用*ngIf替代[hidden] #

这是Angular官方推荐的方案，*ngIf会直接从DOM中添加/移除组件，从根源避免样式冲突问题：

<mat-checkbox *ngIf="false" color="primary" style="color:#787676"
              [(ngModel)]="msgIsChecked" name="vip">
  {{'hello'}}
</mat-checkbox>

注意：如果需要保留组件实例（比如维护表单状态），此方法不适用，需选择其他方案。

方法2：强制覆盖[hidden]样式 #

在全局样式文件（如styles.css）或组件样式中添加高优先级样式，确保[hidden]规则生效：

[hidden] {
  display: none !important;
}

也可以针对MatCheckbox单独设置更精准的样式：

mat-checkbox[hidden] {
  display: none !important;
}

方法3：直接绑定display样式 #

绕过[hidden]属性，直接通过[style.display]控制组件的显示状态：

<mat-checkbox [style.display]="true ? 'none' : 'inline-block'" color="primary" style="color:#787676"
              [(ngModel)]="msgIsChecked" name="vip">
  {{'hello'}}
</mat-checkbox>

将代码中的true替换为实际的布尔判断变量即可。

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