web-dev-qa-db-fra.com

Appliquer la directive d'attribut sur le composant dans Angular 4

J'ai créé le composant img-pop qui a la propriété @Input() bind src . J'ai créé la directive authSrc qui a la propriété @HostBinding() src.

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

}

J'ai directive comme ça.

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

je veux combiner les deux fonctionnalités en un comme.

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

de sorte que le dernier appel url sera/api/url/to/image? access_token = <- token ->

mais il génère une erreur Can't bind to 'src' since it isn't a known property of 'img-pop'.

lien plnkr

S'il vous plaît corrigez-moi si je me trompe de conceptuel.

Je vous remercie.

angularangular2-directivesangular-componentsangular2-hostbinding
7
Naveen raj

Selon cette réponse par le contributeur principal, il est impossible de définir les propriétés directes du composant à l'aide de @HostBinding. @HostBinding se lie toujours directement au DOM. Donc, c'est par conception. Voici l'explication:

Cela fonctionne comme prévu, comme:

  • utiliser la liaison de données pour communiquer entre les directives/composants sur le même élément est plus lent que la communication directe en créant un injecter les autres données 
  • la liaison entre les directives conduit facilement à cycles.

Donc, dans votre cas, voici la solution possible:

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

Pour une approche plus générique, voir this .

2
Max Koretskyi aka Wizard

Les directives ne sont instanciées que pour les sélecteurs correspondant au code HTML ajouté aux modèles de composants de manière statique.
Il n’existe aucun moyen d’ajouter/supprimer des directives d’un élément de manière dynamique. Le seul moyen est d’ajouter/supprimer tout l’élément (par exemple, en utilisant *ngIf 

1
Günter Zöchbauer