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

Question

我尝试对输入元素的readonly属性进行主机绑定，这样它才会被添加到主机元素，但不会分配任何值。它们应该被使用的方式。我知道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;
}

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

我也尝试对renderer.setAttribute做同样的事情，但它的工作方式相同。

那么可能吗？

这里有stackblitz可以玩。

Answer 1

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

说明：

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