web-dev-qa-db-fra.com

Comment ajouter dynamiquement une directive?

Comment ajouter dynamiquement (injecter) une directive en hôte?

J'ai une directive myTooltip et je voudrais ajouter la directive mdTooltip à son hôte. J'ai essayé setAttribute() de ElementRef.nativeElement, mais il ne crée pas la directive mdTooltip.

mytooltip.directive.ts:

@Directive({
  selector: '[my-tooltip]',
  Host: {
    '(mouseenter)': 'show()',
    '(mouseleave)': 'hide()',
  }
})
export class myTooltip {
  @Input('my-tooltip') message;

  constructor() { }

  show() {
    /* TODO: How to add md-tooltip directive to elementref (Host)? */
  }

  hide() {
    /* TODO: remove md-tooltip directive from elementref (Host) */
  }
}

Par hôte, je veux dire l'élément qui a la directive myTooltip:

<span my-tooltip="tooltip hint">Click here</span>

Le résultat ne changerait pas au-dessus de html mais sur mouseenter il aurait la directive md-tooltip dans span.

BTW, la raison pour laquelle j'utilise un wrapper et non directement md-tooltip est que je veux modifier plus tard le retard d'affichage, masquer le retard et personnaliser le comportement de l'info-bulle du matériel par d'autres moyens également.

Edit Apparemment, l'ajout dynamique de directives n'est pas actuellement pris en charge :( Je pense que cette question devrait toujours être là au cas où l'équipe matérielle mettrait à jour

angulartypescriptangular2-directives
25
RichieRock

C'est une fonctionnalité que nous demandons en angulaire ... lisez ceci: https://github.com/angular/angular/issues/8785

Une façon rapide et sale de le faire est d'utiliser:

J'ai une directive nommée myHilite (pour mettre du texte en surbrillance), j'ai aussi un composant nommé MainComponent.ts. Dans MainComponent.ts J'ai ajouté cette ligne de code ...

export class MainComponent {
    @HostBinding('attr.myHilite') myHiliteDirective = new myHilite();
}

Si votre directive nécessite des paramètres ...

export class MainComponent {
    @HostBinding('attr.myHilite') myHiliteDirective = new myHilite(this.elementRef);
}

Votre directive peut avoir besoin d'exécuter du code dans l'un de ses hooks de cycle de vie, appelez manuellement la méthode de hook de cycle de vie de la directive dans la méthode de hook de cycle de vie du composant parent comme ceci ...

export class MainComponent {
    //...code...

    ngOnInit(){
        this.myHiliteDirective.ngOnInit();
    }
}
22
btinoco