web-dev-qa-db-ja.com

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

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

親：

//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)

  }
}

ここで this plunker で実装しました。しかし、それはハックのようです。

親の変数にコンポーネントをアタッチする簡単な方法はありませんか？

angulartypescriptangular-template
38
AbdulRahman AlHamali

ViewChild を使用できます

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

@ViewChild('varName') someElement;

ngAfterViewInit() {
  someElement...
}

ここで、varNameは要素に追加されるテンプレート変数です。または、コンポーネントまたはディレクティブのタイプごとにクエリを実行できます。

ViewChildren 、 ContentChild 、 ContentChildren のような代替手段があります。

@ViewChildrenはコンストラクターでも使用できます。

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

利点は、結果がより早く利用できることです。

http://www.bennadel.com/blog/3041-constructor-vs-property-querylist-injection-in-angular-2-beta-8.htm のいくつかの利点/欠点コンストラクターまたはフィールドを使用します。

注：@Query()は、@ContentChildren()の非推奨の前身です。

更新

Queryは現在、単なる抽象基本クラスです。それがまったく使用されているかどうかはわかりません https://github.com/angular/angular/blob/2.1.x/modules/@angular/core/src/metadata/di.ts#L145

67
Günter Zöchbauer

@ViewChildデコレーターを活用して、注入によって親コンポーネントから子コンポーネントを参照する必要があります。

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

  (...)
}
6
Thierry Templier

実際に行くことができますViewChild API...

parent.ts

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