Mit Angular @HostBinding innerhalb Richtlinie einstellen und aktualisieren Attributwerte auf dem Host

Question

So lassen Sie uns sagen, dass ich die folgende Direktive haben:

<div foo></div> 

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

@Directive({ 
    selector: '[foo]' 
}); 

export class FooDirective { 
    x: number; 

    constructor() { 
     this.x = 100; 
    } 

    @HostBinding('style.left.px') 
    styleLeftPx: number = this.x; 
} 

Wenn ich das machen wie es ist, es scheint nicht, weil zu arbeiten this.x seine bekommt Wert nach@HostBinding hat initialisiert.

Also, die oben auf etwas mehr wie folgt zu ändern:

... 

x: number = 100; 

constructor() {} 

... 

und dieser Wert außerhalb des Konstrukteurs Einstellung wird der Wert ohne Frage hinzugefügt.

Allerdings, wenn ich versuche, diesen Wert an jedem Punkt zu ändern, zum Beispiel mit einem Timeout:

... 

x: number = 100; 

constructor() { 
    setTimeout(() => { 
     this.x = 200; 
    }, 2000) 
} 

... 

Die Host-Attribut nicht aktualisiert, um den neuen Wert. Gibt es nach der initialen Initialisierung keine Datenbindung? Es gibt viele Antworten hier auf dem Stapel, die diskutieren, wie man den Anfangswert eines attr unter Verwendung @HostBinding setzt, aber was ist mit dem Ändern dieses Wertes nach init?

Answer 1

Ich habe herausgefunden, wo ich falsch liege.

Es sollte so aussehen:

<div foo></div> 

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

@Directive({ 
    selector: '[foo]' 
}); 

export class FooDirective { 
    @HostBinding('style.left.px') 
    x: number = 100; 

    constructor() { 
     setTimeout(() => { 
      this.x = 200; 
     }, 2000); 
    } 
} 

Sieht aus wie ich die Syntax rund um dieses Konzept Missverständnis wurde.