Obtenir une référence à une directive utilisé dans un composant

J'ai un composant dont le modèle ressemble à quelque chose comme ceci:

<div [my-custom-directive]>Some content here</div>

J'ai besoin d'accéder à la MyCustomDirective instance de classe utilisé ici. Quand je veux accéder à un composant enfant, j'utilise un ViewChild requête.

Est-il une fonctionnalité équivalente à obtenir l'accès à un enfant de la directive?

InformationsquelleAutor Ben Dilts | 2016-03-31
  1. 93

    Vous pouvez utiliser exportAs propriété de la @Directive annotation. Il exportations de la directive à être utilisé dans la vue parent. À partir de la vue parent, vous pouvez le lier à une variable de vue et d'y accéder à partir de la classe parent à l'aide de @ViewChild().

    Exemple Avec un plunker:

    @Directive({
  selector:'[my-custom-directive]',
  exportAs:'customdirective'   //the name of the variable to access the directive
})
class MyCustomDirective{
  logSomething(text){
    console.log('from custom directive:', text);
  }
}

@Component({
    selector: 'my-app',
    directives:[MyCustomDirective],
    template: `
    <h1>My First Angular 2 App</h1>

    <div #cdire=customdirective my-custom-directive>Some content here</div>
    `
})
export class AppComponent{
  @ViewChild('cdire') element;

  ngAfterViewInit(){
    this.element.logSomething('text from AppComponent');
  }
}

    Mise à jour

    Comme mentionné dans les commentaires, il y a une autre alternative à l'approche ci-dessus.

    Au lieu d'utiliser exportAs, on pourrait directement utiliser @ViewChild(MyCustomDirective) ou @ViewChildren(MyCustomDirective)

    Voici un peu de code pour démontrer la différence entre les trois approches:

    @Component({
    selector: 'my-app',
    directives:[MyCustomDirective],
    template: `
    <h1>My First Angular 2 App</h1>

    <div my-custom-directive>First</div>
    <div #cdire=customdirective my-custom-directive>Second</div>
    <div my-custom-directive>Third</div>
    `
})
export class AppComponent{
  @ViewChild('cdire') secondMyCustomDirective; //Second
  @ViewChildren(MyCustomDirective) allMyCustomDirectives; //['First','Second','Third']
  @ViewChild(MyCustomDirective) firstMyCustomDirective; //First

}

    Mise à jour

    Un autre plunker avec plus de précisions

    • La réponse est grande. Mais cela peut aussi être fait sans cdire directement comme, @ViewChild(MyCustomDirective) element:MyCustomDirective; Puis, dans ngAfterViewInit - this.element.logSomething('text from...'). Alors, pourquoi votre approche lorsque les directement par juste de passage le type, vous pouvez le faire? Juste pour la clarification.
    • Votre démarche est la bonne. cependant, il assume qu'il y a un seul MyCustomDirective. S'il y a plusieurs directives, il va correspondre à la première. Mais, lors de l'utilisation de exportAs, vous pouvez spécifier un élément en particulier, par exemple, la deuxième MyCustomDirective.
    • À l'aide d'une variable de modèle facilite le point de sortir un seul élément si votre modèle contient plus d'un qui serait autrement match. Il dépend toujours de ce que vous essayez d'accomplir et ce que votre situation est. Si vous souhaitez obtenir tous, alors vous serait également utiliser @ViewChildren()
    • Je suis d'accord mais si vous avez plus d'un directives, vous pouvez également passer type approprié.Ne pouvez-vous pas?
    • En fait, je n'ai pas essayé avec les directives moi-même encore, uniquement avec les composants, mais de ce que je me souviens de la lecture dans les docs il devrait travailler avec les directives ainsi.
    • J'ai mis à jour ma réponse avec un peu de code. J'espère que ça vous préciser la différence entre les trois approches.
    • Oui, absolument. vous pouvez le faire et son travail. Mais je n'ai pas de savoir si vous êtes d'accord avec moi ou pas? Êtes-vous?
    • regardez cette... même plusieurs directives et avec une autre complètement différente de la directive plnkr.co/modifier/8RQiStVPx7CCmEIkPsPz?p=preview
    • Je suis d'accord avec vous que votre approche est de travailler. Mais, ce que j'ai et Günter Zöchbauer essayons de clarifier, c'est que lorsque vous avez plusieurs instances de la même directive, vous ne pouvez pas vraiment d'accéder à celui que vous voulez avec ViewChild(), sauf si vous voulez que tous ou de la première instance de ce type. J'ai ajouté le nouveau plunker
    • dans votre plunker, pouvez-vous accéder à la directive avec le contenu Second sans l'aide de exportAs ?
    • Une autre option est d'utiliser le {lire: SomeType} paramètre dans ViewChild comme expliqué ici: stackoverflow.com/a/37476195/1736032. Par exemple: @ViewChild('cdire', {read:MyCustomDirective}) secondMyCustomDirective: MyCustomDirective, et <div #cdire my-custom-directive>Second</div> (pas de exportAs nécessaire).
    • J'ai également le même souci comment peut faire référence à une directive par le modèle lors de la lecture angulaire de la doc angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars. Maintenant je vois que nous avons besoin de exportAs. Très bon point! Merci!

    InformationsquelleAutor Abdulrahman Alsoghayer
  2. 16

    Il semble que depuis @Abdulrahman réponse, les directives peuvent ne plus être accessibles à partir de @ViewChild ou @ViewChildren que ces seuls éléments sur l'élément DOM lui-même.

    Au lieu de cela, vous devez accéder à des directives à l'aide de @ContentChild/@ContentChildren.

    @Component({
    selector: 'my-app',
    template: `
    <h1>My First Angular 2 App</h1>

    <div my-custom-directive>First</div>
    <div #cdire=customdirective my-custom-directive>Second</div>
    <div my-custom-directive>Third</div>
    `
})
export class AppComponent{
  @ContentChild('cdire') secondMyCustomDirective; //Second
  @ContentChildren(MyCustomDirective) allMyCustomDirectives; //['First','Second','Third']
  @ContentChild(MyCustomDirective) firstMyCustomDirective; //First
}

    Il n'est pas non plus un directives bien sur @Component attribut.

    • Les instances créées à l'aide de @ContentChild ne sont pas définis. Pourquoi ? Par exemple, l'intérieur d'un composant de la fonction this.firstMyCustomDirective est undefined
    • ContentChild ou ViewChild ne semble pas fonctionner et retour d'une variable non définie
    • stackoverflow.com/questions/34326745/... je pense qu'il y a quelques malentendus.
    • À compter de 2019, cela ne semble pas être correcte, ContentChild et ViewChild les deux semblent revenir indéfini dans ngAfterViewInit
    InformationsquelleAutor Tobias J
  3. 0

    La seule solution restante à compter de 2019

    Comme mentionné dans les commentaires des autres réponses, à ces autres (précédemment en vigueur) méthodes ne fonctionne pas avec les versions les plus récentes Angulaire.

    Réjouissez-vous, cependant, car il y a un moyen encore plus simple façon de l'obtenir injecté: directement à partir du constructeur!

    @Component({
   //...
})
export class MyComponent implements OnInit {

  //Would be *undefined*
  //@ContentChild(MyDirective, { static: true })
  //private directive: MyDirective;

  constructor(private directive: MyDirective) { }

  ngOnInit(): void {
    assert.notEqual(this.directive, null); //it passes!
  }
}

    En outre, vous pouvez ajouter des annotations à dire l'Injection de Dépendance moteur où regarder pour le contenu à injecter, à l'aide de @Auto ou @Facultatif par exemple

    InformationsquelleAutor ccjmne