コンポーネントの子要素を取得する

Question

これは比較的単純なようですが、そのドキュメントを見つけることができませんでした。私はコンポーネントの子要素にアクセスする必要があるangular2指示文を持っています。私ElementRef.nativeElementとして

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

を、私は入力要素への参照を取得する必要があります。例えば、私が持っています。どうやってやるの？また、このディレクティブはサードパーティコンポーネント上で実行されているため、テンプレートを編集したり、elementRefを追加することはできません。

Answer 1

elementRefがある場合は、通常のDOMメソッドを使用できます（Element.querySelectorなど）。あなたは、おそらくもngOnInitフックでそれをしたいと思う：

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

Answer 2

あなたは@ViewChildデコレータを使用する必要があります。

まず、取得する子要素にidを追加します。

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

次にコンポーネント内で取得します。

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); 
    } 
} 

詳しい情報ここに：https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html