Apply-Attribut-Direktive auf Komponente in Angular 4

Question

Ich habe img-pop-Komponente erstellt, die @Input() Bind-Eigenschaft src hat. Ich habe authSrc Direktive erstellt, die @HostBinding() Eigenschaft src hat.

@Component({ 
selector: 'img-pop', 

template: `<img [src]="src"/> 
      <div *ngIf="isShow"> 
       <----extra value-----> 
      </div>` 
}) 

export class ImgPopOverComponent implements OnInit { 

@Input() 
private src; 

private isShow=false; 

@HostListener('mouseenter') onMouseEnter() { 
    this.isShow= true; 
} 

@HostListener('mouseleave') onMouseLeave() { 
    this.isShow= false; 
} 

} 

Ich habe Anweisung wie folgt.

@Directive({ selector: '[authSrc]' }) 
export class AuthSrcDirective implements OnInit { 

@HostBinding() 
private src: string; 

constructor(private element: ElementRef) { } 

ngOnInit() { } 

    @Input() 
    set authSrc(src) { 
    this.src = src+"?access_token=<-token->"; 
    } 
} 

Ich möchte beide Funktionen in einem wie kombinieren.

<img-pop [authSrc]="/api/url/to/image"></img-pop> 

so dass die endgültige URL-Aufruf wird/api/url/to/Bild access_token = < --token ->

aber es wirft Can't bind to 'src' since it isn't a known property of 'img-pop'. Fehler

plnkr link

Bitte korrigieren Sie mich, wenn ich falsch mit konzeptionell bin.

Vielen Dank.

Answer 1

Nach this answer durch den Core Contributor ist es unmöglich, direkte Eigenschaften der Komponente mit @HostBinding zu setzen. @HostBinding bindet immer direkt an das DOM. Das ist also Absicht. Hier ist die Erklärung:

Das wie vorgesehen funktioniert, wie:

• Daten unter Verwendung der Bindung an kommunizieren zwischen Richtlinien/Komponenten auf das gleiche Element ist langsamer als die direkte Kommunikation, indem sie eine injizieren, um die andere Daten
• Bindung zwischen Direktiven führt leicht zu Zyklen.

Also, in Ihrem Fall, das ist die mögliche Lösung ist:

export class AuthSrcDirective { 
    // inject host component 
    constructor(private c: ImgPopOverComponent) { } 

    @Input() 
    set authSrc(src) { 
     // write the property directly 
     this.c.src = src + "?access_token=<-token->"; 
    } 
} 

Für einen generalistischen Ansatz sieht this.

Answer 2

Direktiven werden nur für Selektoren instanziiert, die mit HTML übereinstimmen, das statisch zu Komponentenvorlagen hinzugefügt wird.
Es gibt keine Möglichkeit, Anweisungen dynamisch aus einem Element hinzuzufügen/zu entfernen. Die einzige Möglichkeit besteht darin, das gesamte Element hinzuzufügen/zu entfernen (zum Beispiel unter Verwendung von *ngIf