web-dev-qa-db-fra.com

Angular 4 méthode de directive d'appel du composant

j'essaye de construire une directive structurelle qui changera la structure DOM parent soit invoquée en utilisant son sélecteur (statique) ou en appelant sa méthode publique (dynamique).

  • L'utilisation du sélecteur de directives dans un modèle html fonctionne correctement sans aucun problème.

  • J'essaie de comprendre si nous pouvons réaliser la même chose sans l'utiliser dans le modèle et en appelant la méthode directive.

ma-directive.ts

@Directive({ selector: '[sampleDirective]' })

export class SampleDirective {
    ...
   constructor(..) {
        this.customDirective();
     }
  }
customDirective() {
    console.log('Inside customDirective()');
}

my-component.ts

import { SampleDirective } from './my.directive';
...
@Component({
 selector: 'my-component',
 template: `<button (click)="click()"> Click Me </button>`
})
constructor() { }
..
click() {
  // call directive method here
}

J'en ai besoin parce que je crée une solution générique pour changer la structure DOM d'un composant au moment de l'exécution à l'aide d'une directive.

** veuillez ignorer s'il y a une faute de frappe. désolé de ne pas avoir pu coller le code complet ici

angularangular-directiveangular-components
10
mperle

S'il n'y a pas de directive dans le modèle de composant Angular ne le traitera pas. Avec ng-container tag vous n'encombrerez pas le modèle en aucune façon. Pour obtenir la directive, utilisez @ViewChildren/@ViewChild pour obtenir l'instance de la directive:

@Component({
 selector: 'my-component',
 template: `<button (click)="click()"> Click Me </button>
            <ng-container sampleDirective></ng-container>`
})
@ViewChildren(SampleDirective) dirs;
constructor() { }
..
click() {
   this.dirs.first.customDirective();
  // call directive method here
}
14
Maxim Koretskyi

Pour appeler la méthode directive à partir du composant, vous pouvez utiliser ViewChild décorateur pour localiser l'instance de directive sur la page. Ensuite, en utilisant le même, vous pouvez accéder à la directive tous les accessoires.

@ViewChild(SampleDirective) directive;
constructor() { }
..
click() {
  // call directive method here
  this.directive.customDirective()
}
0
Pankaj Parkar