親コンポーネント内の子コンポーネントへの参照を取得する

Question

角2では、子コンポーネントを持つコンポーネントがあります。しかし、私は、その子コンポーネントのコピーを取得して、親で使用するか、関数などを呼び出すことが必要です。

ローカル変数を使用できることがわかりました。その方法でテンプレート内のコンポーネントを使用できるようになります。しかし、私はテンプレートで使用するだけではなく、コンポーネントの実際のコードで使用したいと思います。

は私がそれをする方法を見つけ、ここの子コードです：

//our child 
import {Component, OnInit, EventEmitter} from 'angular2/core' 

@Component({ 
    selector: 'my-child', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Child</h2> 

    </div> 
    `, 
    directives: [], 
    outputs: ['onInitialized'] 
}) 

export class Child implements OnInit{ 

    onInitialized = new EventEmitter<Child>(); 

    constructor() { 
    this.name = 'Angular2' 
    } 

    ngOnInit() { 
    this.onInitialized.emit(this); 
    } 
} 

親： http://plnkr.co/edit/e3pEn9Hd54q1mijNGDpR?p=preview

しかし、それは：私はこのplunkerにここでそれを実現し

//our root app component 
import {Component} from 'angular2/core' 
import {Child} from './child' 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <my-child (onInitialized)="func($event)"></my-child> 
    </div> 
    `, 
    directives: [Child] 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2' 
    } 

    func(e) { 
    console.log(e) 

    } 
} 

ハックのように思えますが、コンポーネントを親の変数にアタッチする簡単な方法はありませんか？

Answer 1

を使用できvarNameが要素に追加テンプレート変数であるViewChild

<child-tag #varName></child-tag> 

@ViewChild('varName') someElement; 

ngAfterViewInit() { 
    someElement... 
} 

。また、コンポーネントまたはディレクティブの種類によって問合せを行うこともできます。

は

@ViewChildrenContentChildrenもコンストラクタ

constructor(@ViewChildren('var1,var2,var3') childQuery:QueryList) 

利点が結果が早く利用可能であるということであるに使用することができ、ViewChildren、ContentChildのような選択肢があります。

したがって、http://www.bennadel.com/blog/3041-constructor-vs-property-querylist-injection-in-angular-2-beta-8.htmでも、コンストラクタまたはフィールドを使用する利点と欠点があります。

注：@Query()は@ContentChildren()

• https://github.com/angular/angular/blob/2.0.0-beta.17/modules/angular2/src/core/metadata.dart#L146
• https://github.com/angular/angular/blob/2.0.0-beta.17/modules/angular2/src/core/metadata.dart#L175

更新

Queryの非推奨の前身である、現在だけで抽象基本クラスです。あなたが実際にViewChild APIで行くことがあり、すべてのhttps://github.com/angular/angular/blob/2.1.x/modules/@angular/core/src/metadata/di.ts#L145

Answer 2

で使用されている場合、私は

は

• Check your forked plunker for complete code - ViewChild API

...親を発見していません。TSあなたは、注射によって、親1から子コンポーネントを参照するために@ViewChildデコレータを活用する必要が

<button (click)="clicked()">click</button> 

export class App { 
    @ViewChild(Child) vc:Child; 
    constructor() { 
    this.name = 'Angular2' 
    } 

    func(e) { 
    console.log(e) 

    } 
    clicked(){ 
    this.vc.getName(); 
    } 
} 

child.ts

export class Child implements OnInit{ 

    onInitialized = new EventEmitter<Child>(); 
    ... 
    ... 
    getName() 
    { 
    console.log('called by vc') 
    console.log(this.name); 
    } 
} 

Answer 3

：

import { Component, ViewChild } from 'angular2/core'; 

(...) 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>My First Angular 2 App</h1> 
    <child></child> 
    <button (click)="submit()">Submit</button> 
    `, 
    directives:[App] 
}) 
export class AppComponent { 
    @ViewChild(Child) child:Child; 

    (...) 

    someOtherMethod() { 
    this.searchBar.someMethod(); 
    } 
} 

はこちら更新されたplunkr：http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview。

あなたは@Queryパラメータデコレータを使用することもできることに気づくことができます。

export class AppComponent { 
    constructor(@Query(Child) children:QueryList<Child>) { 
    this.childcmp = children.first(); 
    } 

    (...) 
}