typescript - Er det mulig å legge til et attributt på Angular host-element uten en verdi

Jeg prøver å gjøre host-binding til input-elementets readonly-attributt slik at det bare blir lagt til host-elementet, men ikke får noen verdi tilordnet. Slik de er ment å brukes. Jeg vet at HTML-spesifikasjonen spesifikt sier at det å tilordne det en verdi ikke vil ha noen forskjell så lenge attributtet er til stede.

Men likevel. Er det mulig å legge til et attributt uten en verdi på en eller annen måte?

Hva jeg prøvde

Siden attributter blir fjernet når de får en null-verdi, har jeg gjort dette trikset:

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

Dette vil delvis fungere fordi det vil fjerne readonly-attributtet fra host-elementet når verdien er null, men når verdien er en tom streng vil dette fortsatt resultere i readonly="", noe som ikke er det jeg prøver å gjøre. Mitt ønskede resultat ville bare være readonly uten at noen verdi blir anvendt på det.

Jeg prøvde også å gjøre det samme med renderer.setAttribute, men det fungerer på samme måte.

Er det mulig da?

Her er en stackblitz å leke med.

Svar #1

Du kan oppnå dette ved å bruke @HostBinding('attr.readonly') readOnly='';

Forklaring:

  • Å tilordne '' til attributtet vil bare legge til attributtet uten verdi.
  • Tildele null for å fjerne attributtet.
  • Angi ikke-null-verdi, f.eks.: true eller yes, vil sette den tilsvarende verdien på attributtet.

Relaterte artikler