Angular布尔输入问题：未设置masDisabled的组件意外禁用

算力阿峰

2026-8-19

解决方案

你的问题核心在于Input属性名称不匹配以及未正确处理HTML属性的取值场景，以下是针对性的修复步骤：

1. 修正Input属性绑定名称

你在模板中使用的是masDisabled，但组件里的@Input别名是disabledMas，这导致属性绑定完全失效，不管是否设置masDisabled，setter都不会触发，disabledMas始终保持初始值true，所以所有按钮都被禁用。

需要将@Input('disabledMas')改为@Input('masDisabled')，确保模板属性与组件Input正确关联。

2. 调整setter逻辑，覆盖所有场景

根据你的需求：

未设置masDisabled时：按钮启用（disabledMas为false）
设置masDisabled（无值）或masDisabled="true"时：按钮禁用（disabledMas为true）
设置masDisabled="false"时：按钮启用（disabledMas为false）

修改后的button.component.ts代码：

disabledMas = false; // 默认未设置时按钮启用

@Input('masDisabled')
get masDisabled(): boolean {
    return this.disabledMas;
}
set masDisabled(value: any) {
    // 属性未设置时，保持默认值
    if (value === undefined) {
        this.disabledMas = false;
        return;
    }
    // 处理HTML属性的无值、字符串true/false场景
    this.disabledMas = !(value === false || value === 'false');
}