获取父组件中子组件的引用

Question

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

  }
}

我在这个插件中实现了它:http://plnkr.co/edit/e3pEn9Hd54q1mijNGDpR？p = preview

但它似乎是一个黑客,是不是有一个更简单的方法将组件附加到其父变量？

Answer 1

您可以使用ViewChild

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

@ViewChild('varName') someElement;

ngAfterViewInit() {
  someElement...
}

where ViewChild是添加到元素的模板变量.或者,您可以按组件或指令类型进行查询.

还有ViewChildren,ContentChild,ContentChildren等替代品

varName 也可以在构造函数中使用

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

优点是结果可以提前获得.

因此,http://www.bennadel.com/blog/3041-constructor-vs-property-querylist-injection-in-angular-2-beta-8.htm也可以了解使用构造函数或字段的一些优点/缺点.

注意:ViewChildren是不推荐使用的前身ContentChild

• 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

更新

ContentChildren目前只是一个抽象的基类.我还没有找到它是否全部使用https://github.com/angular/angular/blob/2.1.x/modules/@angular/core/src/metadata/di.ts#L145

Answer 2

您需要利用@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();
  }

  (...)
}

Answer 3

你实际上可能会和ViewChild API...

• 检查您的分叉插件以获得完整代码 - ViewChild API

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

孩子.ts

export class Child implements OnInit{

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