angular - 是否可以在没有值的情况下向 Angular 宿主元素添加属性

Question

我正在尝试对输入元素的只读属性进行主机绑定(bind)，以便它只会添加到主机元素，但不会为其分配任何值。它们应该被使用的方式。我知道 HTML 规范明确指出，只要属性存在，为其分配任何值都不会有任何区别。

但还是。是否可以以某种方式添加没有值的属性？

我尝试了什么

由于属性在应用 null 值时被删除，所以我使用了这个技巧:

@HostBinding('attr.readonly')
private _readonly: '' | null = null;
public get readonly() {
  return this._readonly !== null;
}
public set readonly(value: boolean) {
  this._readonly = value ? '' : null;
}

这将部分起作用，因为当值为 null 时，它将从宿主元素中删除 readonly 属性，但是当值为空字符串时，这仍然会导致在 readonly="" 中，这不是我想要做的。我想要的输出只是 readonly 而没有应用任何值。

我也尝试用 renderer.setAttribute 做同样的事情，但效果是一样的。

那有可能吗？

这是一个 stackblitz玩。

Answer 1

您可以使用 @HostBinding('attr.readonly') readOnly = '';

解释:

• 将''赋值给属性只会添加没有值的属性。
• 分配 null 以删除属性。
• 设置非空值，例如:true 或 yes 并在属性。