Angular 2
Attributanweisungen, um den Wert von Eigenschaften auf dem Hostknoten mithilfe des @ HostBinding-Dekors zu beeinflussen

@HostBinding

Mit dem @HostBinding-Dekorator können wir einen Eigenschaftswert für das Hostelement der Anweisung programmgesteuert festlegen. Es funktioniert ähnlich wie eine Eigenschaftsbindung, die in einer Vorlage definiert ist, außer es richtet sich speziell an das Hostelement. Die Bindung wird für jeden Änderungserkennungszyklus überprüft, sodass sie sich bei Bedarf dynamisch ändern kann. Nehmen wir beispielsweise an, wir möchten eine Direktive für Schaltflächen erstellen, die eine Klasse dynamisch hinzufügt, wenn Sie darauf drücken. Das könnte ungefähr so ​​aussehen:

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[appButtonPress]'
})
export class ButtonPressDirective {
  @HostBinding('attr.role') role = 'button';
  @HostBinding('class.pressed') isPressed: boolean;

  @HostListener('mousedown') hasPressed() {
    this.isPressed = true;
  }
  @HostListener('mouseup') hasReleased() {
    this.isPressed = false;
  }
}

Beachten Sie, dass wir für beide Anwendungsfälle von @HostBinding einen String-Wert übergeben, für den die Eigenschaft relevant ist. Wenn wir dem Dekorateur keinen String zur Verfügung stellen, wird stattdessen der Name des Klassenmitglieds verwendet. In der ersten @ HostBinding setzen wir das Rollenattribut statisch auf button. Im zweiten Beispiel wird die gedrückte Klasse angewendet, wenn isPressed true ist