Angular 2
Attributdirektiv för att påverka värdet på egenskaper på värdnoden genom att använda @HostBinding-dekoratören.

@HostBinding

@HostBinding-dekoratören låter oss programmera ett fastighetsvärde på direktivets värdelement. Det fungerar på samma sätt som en fastighetsbindning som definieras i en mall, förutom att den specifikt riktar sig till värdelementet. Bindningen kontrolleras för varje förändringsdetekteringscykel, så den kan ändras dynamiskt om så önskas. Låt oss till exempel säga att vi vill skapa ett direktiv för knappar som dynamiskt lägger till en klass när vi trycker på den. Det kan se ut som:

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;
  }
}

Lägg märke till att för båda användningsfallen av @HostBinding överför vi ett strängvärde för vilken egenskap vi vill påverka. Om vi inte levererar en sträng till dekoratören kommer namnet på klassmedlemmen att användas istället. I den första @HostBinding ställer vi in statisk rollattribut till knappen. För det andra exemplet kommer den tryckta klassen att tillämpas när isPression är sant