angolare 2: Ottenere riferimento ad una direttiva utilizzata in un componente

Question

Ho un componente il cui modello simile a questa:

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

ho bisogno di accedere alla istanza di classe MyCustomDirective usata qui. Quando voglio accedere a un componente figlio, utilizzo una query ng.core.ViewChild. Esiste una funzionalità equivalente per ottenere l'accesso a una direttiva figlio?

Answer 1

È possibile utilizzare exportAs proprietà della @Directive annotazione. Esporta la direttiva da utilizzare nella vista principale. Dalla vista principale, è possibile associarlo a una variabile di visualizzazione e accedervi dalla classe padre utilizzando @ViewChild().

esempio con 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'); 
    } 
} 

Aggiornamento

Come accennato nei commenti, c'è un'altra alternativa al metodo di cui sopra.

Invece di usare exportAs, si potrebbe usare direttamente @ViewChild(MyCustomDirective) o @ViewChildren(MyCustomDirective)

Ecco il codice per dimostrare la differenza tra i tre approcci:

@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 

} 

Aggiornamento

Another plunker with more clarification

Answer 2

Sembra che, dal momento che la risposta di @ Abdulrahman, non è più possibile accedere alle direttive da @ViewChild o @ViewChildren poiché questi passano solo elementi sull'elemento DOM stesso.

Invece, è necessario accedere alle direttive utilizzando @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 
} 

C'è anche non è più una proprietà directives su attributi @Component.