Angulaire 4 appel de méthode directive du composant

je suis en train de construire un structurels directive qui va changer le parent DOM structure soit invoqué à l'aide de son sélecteur (statique) ou en appelant sa méthode publique(dynamique).

  • À l'aide de la directive sélecteur dans un modèle html fonctionne très bien sans
    toutes les questions.
  • Je suis en train de voir si nous avons un obtenir le même sans l'aide de ce modèle et en appelant la méthode directive.

mon-directive.ts

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

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

mon composant.ts

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

J'ai besoin de cela parce que je suis de la création d'une solution générique pour modifier le DOM de la structure d'un composant à l'exécution avec l'aide d'une directive.

** s'il vous plaît ignorer s'il y a des fautes de frappe. désolé que je ne pouvais pas coller le code complet ici

sa ne va pas être possible sans avoir à la directive dans le modèle. Ce que vous voulez est plus un helpermethod/classe qu'une directive.
pourriez-vous me fournir un exemple.

OriginalL'auteur mperle | 2017-08-29

  1. 10

    Si il n'y a aucune directive dans le modèle de composant Angulaire de ne pas le traiter. Avec ng-container tag vous permettra de ne pas encombrer modèle en quelque sorte. Pour obtenir la directive ensuite utiliser @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
}
    Merci. pouvons-nous le faire sans l'élément div. Cependant je n'ai pas obtenu le résultat escompté, même avec la solution ci-dessus.
    vous devez disposer de la directive appliquée à un élément. vous pouvez utiliser ng-container au lieu de div, c'est rendu comme un commentaire. que voulez-vous dire que vous n'obtenez pas le résultat attendu? qu'est-ce que this.dirs.length? lorsque vous appelez la click()?
    j'ai mis à jour ma question. merci de vérifier et de me fournir si nous pouvons atteindre l'exigence.
    si il n'y a aucune directive dans le modèle de composant Angulaire de ne pas le traiter. Pourquoi l'exigence de ne pas utiliser la directive dans le modèle? Avec ng-container tag vous permettra de ne pas encombrer modèle en quelque sorte
    aucun commentaire?

    OriginalL'auteur Max Koretskyi aka Wizard

  2. 0

    Pour l'appel de méthode directive du composant, vous pouvez utiliser ViewChild décorateur pour localiser la directive exemple sur la page. Ensuite, en utilisant le même, vous pourriez avoir accès directive tous les accessoires. 

    @ViewChild(SampleDirective) directive;
constructor() { }
..
click() {
  //call directive method here
  this.directive.customDirective()
}
    Je vous remercie pour votre réponse. J'ai essayé cette solution. Mais, j'ai eu la console d'erreur "impossible de lire la propriété customDirective de undefined'
    pouvez-vous me dire où avez-vous placé sampleDirective?
    vouliez-vous dire au cas où la directive fichier se trouve ou ?
    eh bien, je voulais dire où vous avez utilisé la directive sur l'HTML?
    thats pas le problème ici. Je ne veux pas utiliser à l'intérieur de n'importe quel modèle. Je veux appeler la méthode pour apporter des modifications à dom. Est-ce possible ? J'ai mis à jour la question.

    OriginalL'auteur Pankaj Parkar