Verweis auf eine Richtlinie in einem Bauteil

Ich habe eine Komponente, deren Vorlage sieht ungefähr so aus:

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

Ich brauche den Zugriff auf die MyCustomDirective Instanz der Klasse verwendet. Wenn ich will, um Zugang zu einer Kind-Komponente, verwende ich eine ViewChild Abfrage.

Gibt es eine entsprechende Funktion, um Zugang zu einem Kind Richtlinie?

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

    Können Sie exportAs Eigenschaft des @Directive annotation. Es exportiert die Richtlinie verwendet werden, in der übergeordneten Ansicht. Aus der übergeordneten Sicht können Sie binden Sie es an einen view-Variablen und diese von der übergeordneten Klasse mithilfe von @ViewChild().

    Beispiel Mit einem 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');
  }
}

    Update

    Wie bereits erwähnt in den Kommentaren, es gibt eine alternative zu dem obigen Ansatz.

    Anstatt exportAs könnte man direkt verwenden @ViewChild(MyCustomDirective) oder @ViewChildren(MyCustomDirective)

    Hier ist etwas code zu zeigen, den Unterschied zwischen den drei Ansätzen:

    @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

}

    Update

    Ein weiterer plunker mit mehr Klarheit

    • Die Antwort ist groß. Aber dies kann auch durchgeführt werden, ohne cdire direkt wie @ViewChild(MyCustomDirective) element:MyCustomDirective; Dann, in ngAfterViewInit - this.element.logSomething('text from...'). Warum also dein Ansatz, wenn direkt nur durch die übergabe der Typ, den Sie tun können? Gerade für die Klarstellung.
    • Dein Ansatz ist gut. Sie übernimmt jedoch gibt es nur eine MyCustomDirective. Wenn es mehrere Richtlinien, werde es übereinstimmt, die der ersten ein. Aber, wenn mit exportAs können Sie angeben, einen bestimmten, zum Beispiel der zweite MyCustomDirective.
    • Mit einer template-Variablen macht es einfacher, Punkt aus einem einzigen element, wenn Ihre Vorlage enthält mehr als eine, die sonst übereinstimmen. Es hängt immer davon ab, was Sie eigentlich versuchen zu erreichen und was Ihre situation ist. Wenn Sie möchten, zu bekommen, dann würden Sie auch verwenden @ViewChildren()
    • Ich Stimme aber, wenn Sie mehr als eine der Richtlinien, können Sie auch an entsprechenden Art.Können Sie nicht?
    • Tatsächlich, ich habe nicht versucht, mit den Richtlinien, die selber noch nur mit Komponenten, sondern von dem, was ich erinnere mich aus der Lektüre in die Doku sollte es mit Richtlinien so gut.
    • Ich aktualisiert meine Antwort mit dem code. Ich hoffe, es ist zu klären den Unterschied zwischen den drei Ansätzen.
    • Ja, absolut. Sie können es tun, und seinen arbeiten. Aber ich habe nicht bekommen, ob Sie mir Zustimmen oder nicht? Sind Sie?
    • schau dir mal an... gleich mehrere Richtlinien und mit völlig anderen Richtlinie plnkr.co/Bearbeiten/8RQiStVPx7CCmEIkPsPz?p=Album Vorhören
    • Ich Stimme mit Ihnen überein, dass Ihr Ansatz funktioniert. Aber, was ich und Günter Zöchbauer versuchen zu klären, ist, dass wenn Sie mehrere Instanzen der gleichen Richtlinie, kann man nicht wirklich zugreifen, die Sie wollen mit ViewChild() es sei denn, Sie möchten, dass alle oder die erste Instanz des Typs. Ich fügte hinzu, neue plunker
    • in Ihrem plunker, können Sie Zugriff auf die Richtlinie mit Inhalt Second ohne Verwendung exportAs ?
    • Eine weitere option ist die Verwendung der {Lesen: SomeType} - parameter in ViewChild, wie hier beschrieben: stackoverflow.com/a/37476195/1736032. Zum Beispiel: @ViewChild('cdire', {read:MyCustomDirective}) secondMyCustomDirective: MyCustomDirective, und <div #cdire my-custom-directive>Second</div> (keine exportAs erforderlich).
    • Ich habe auch das gleiche Anliegen, wie den Verweis auf eine Richtlinie, durch Vorlage beim Lesen eckig doc angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars. Jetzt sehe ich, wir müssen exportAs. Sehr guter Punkt! Danke!

    InformationsquelleAutor Abdulrahman
  2. 16

    Scheint es, dass, da @Abdulrahman Antwort, Richtlinien kann nicht mehr zugegriffen werden, aus @ViewChild oder @ViewChildren wie diese passieren nur Elemente, die auf das DOM-element selbst.

    Stattdessen müssen Sie die Richtlinien mit @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
}

    Gibt es auch nicht mehr ein directives Eigenschaft auf @Component Attribut.

    • Die Instanzen erstellt mit @ContentChild sind nicht definiert. Warum ? Zum Beispiel innerhalb einer Komponente Funktion this.firstMyCustomDirective ist undefined
    • ContentChild oder ViewChild nicht zu funktionieren scheint und eine nicht definierte variable
    • stackoverflow.com/questions/34326745/... ich denke, es gibt einige Missverständnisse.
    • Ab 2019, scheint dies nicht korrekt zu sein, ContentChild und ViewChild beide scheinen undefined zurück in ngAfterViewInit
    InformationsquelleAutor Toby J
Schreibe einen Kommentar