Angular 2，输入属性已从 DOM 中删除答案

【问题标题】：Angular 2, input attribute is removed from DOMAngular 2，输入属性已从 DOM 中删除
【发布时间】：2017-08-22 03:09:48
【问题描述】：

我有一个可以通过绑定启用/禁用的按钮：

<button [disabled]="model.disabled">Do Something</button>

我有一些依赖于该属性的样式，例如：

button[disabled] {
  background: red;
}

到目前为止一切顺利。

现在我在那个按钮上附加一个指令，该按钮使用 disabled 属性作为输入：

@Directive({
  selector: "[some-directive]"
})
class SomeDirective {
  @Input("disabled") disabled: boolean;
}

如果我将此指令附加到节点：

<button some-directive [disabled]="model.disabled">Do Something</button>

这会从 DOM 中剥离 disabled 属性，这会破坏我的样式。

为什么要这样做？我可以阻止它这样做吗？

【问题讨论】：

但是 [disabled] 是已知的 Angular 属性，为什么需要制定指令？名称冲突也会发生
我已将我的问题简化为一个简单的示例。我没有创建禁用指令。我的代码中有许多控件和组件，可以通过disabled 属性禁用它们。我还有一个tooltip 指令，它显示一个自定义工具提示。如果附加到的节点被禁用，我需要知道它，以便我可以关闭工具提示。所以我将disabled 属性作为输入。不应该有名称冲突。它是输入，而不是输出。如果我愿意，我应该能够有 100 个指令来监视该输入并对其采取行动。

【解决方案1】：

在您的指令中使用另一个名称作为输入以避免冲突：

@Input("_disabled") disabled: boolean;

然后就可以了。

【讨论】：