Ottiene l'elemento figlio del componente

Question

Sembra una cosa relativamente semplice, ma non sono riuscito a trovare la documentazione per esso. Ho una direttiva angular2 che deve accedere a un elemento figlio di un componente. Per esempio io ho:

<ion-input> 
    <input> 
    <button></button> 
</ion-input> 

come il mio ElementRef.nativeElement e ho bisogno di ottenere un riferimento all'elemento di ingresso. Come lo posso fare? Inoltre, questa direttiva sta andando su un componente di terze parti quindi non sono in grado di modificare il modello o aggiungere elementRefs.

Answer 1

Se si dispone di elementRef, è possibile utilizzare i normali metodi DOM, ad esempio Element.querySelector. E 'probabile che anche voler fare in ngOnInit gancio:

ngOnInit() { 
    let input = elementRef.nativeElement.querySelector('input') 
} 

Answer 2

si dovrebbe usare il decoratore @ViewChild.

Innanzitutto, aggiungere un ID sull'elemento figlio che si desidera recuperare.

<ion-input> 
    <input #input> 
    <button></button> 
</ion-input> 

Quindi recuperarlo nel componente.

import { Component, ViewChild, ElementRef, OnInit } from "@angular/core" 
@Component({ 
    selector: "my-component", 
    template: ` 
    <ion-input> 
     <input #input> 
     <button></button> 
    </ion-input>` 
}) 
export class MyComponent implements OnInit { 
    @ViewChild("input") inputChild: ElementRef; 

    ngOnInit() { 
    haveFunWith(inputChild); 
    } 
} 

Maggiori informazioni qui: https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html