Async HostBinding in Direktive

Question

Ich bin auf der Suche nach der besten Möglichkeit, HostBinding mit Async-Wert zu behandeln.

Vor Angular v2.1.2 Ich konnte die host Eigenschaft im @Directive Dekorateur wie das verwenden:

@Directive({ 
    selector: 'img[my-directive]', 
    host : { 
     '[alt]' : "alt | async" 
    } 
}) 
export class MyDirective { 
    alt: Observable<string>; 
} 

Aber es sieht so nicht das beabsichtigte Verhalten war, seit der Version 2.1.2 korrigiert sie. Siehe don't access view local variables nor pipes in host expressions.

Jetzt, wenn kompilieren mit AoT Compilation, bekomme ich Parser Error: Host binding expression cannot contain pipes in Directive.

Answer 1

Tobias Bosch (Mitglied des Angular-Team) explizit zuweisen schreibt:

Host-Bindungen einer Komponente ("Kind") in der Komponente ausgeführt werden , die verwendet diese Komponente ("Eltern"). Und die Elternkomponente kann zu einem anderen NgModule gehören. Wenn Sie also eine Pipe verwenden, wird die Pipe gegen das NgModule der übergeordneten Komponente aufgelöst. Wenn jedoch NgModule die von Ihnen verwendete Pipe nicht deklariert, ist Ihre Komponente defekt.

Dies ist der Grund, warum wir nie Rohre in Host-Bindungen haben wollten. Nach einem der größeren Compiler Refactorings vor 2.0 Finale, wir versehentlich wieder eingeführt, aber das war ein Fehler, kein Feature, wie die Semantik falsch sind.

Quelle:

Async Host Binding No Longer Works #12671

Answer 2

Ich bin sicher, dass es keine spezielle Möglichkeit gibt, es zu tun. Sie müssen die Eigenschaft

@Directive({ 
    selector: 'img[my-directive]', 
    host : { 
     '[alt]' : "alt" 
    } 
}) 
export class MyDirective { 
    alt: Observable<string>; 

    ngOnInit() { 
     this.altObservable.subscribe(val => this.alt = val) 
    } 
}