在父组件中获取对子组件的引用 [英] Getting reference to child component in parent component

问题描述

在Angular 2中，我有一个具有子组件的组件.但是，我想获取该子组件的副本以在父组件中使用，调用其功能或其他功能.

In Angular 2, I have a component that has a child component. However, I want to acquire a copy of that child component to use in the parent, to call its functions or whatever.

我发现我可以使用局部变量，这样便可以使用模板中的组件.但是，我不仅要在模板中使用它，还想在组件的实际代码中使用它.

I found out that I could use local variables, and that way I will be able to use the component in the template. However, I don't to only use it in the template, I want to use it in the actual code of the component.

我找到了一种方法，这是子代码:

I found a way to do that, here is the child code:

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

  }
}

我在此小车中在此处实现了该功能.但这似乎是一种黑客.

I implemented it here in this plunker. But it seems like a hack.

没有一种更简单的方法将组件附加到其父项中的变量上吗?

Isn't there a simpler way to attach the component to a variable in its parent?

推荐答案

您可以使用 ViewChild

You can use ViewChild

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

@ViewChild('varName') someElement;

ngAfterViewInit() {
  someElement...
}

其中，varName是添加到元素的模板变量.另外，您也可以按组件或指令类型进行查询.

where varName is a template variable added to the element. Alternatively, you can query by component or directive type.

还有其他替代方法，例如 ViewChildren ， ContentChild ，

There are alternatives like ViewChildren, ContentChild, ContentChildren.

@ViewChildren也可以在构造函数中使用.

@ViewChildren can also be used in the constructor.

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

优点是可以更早获得结果.

The advantage is that the result is available earlier.

另请参见

See also http://www.bennadel.com/blog/3041-constructor-vs-property-querylist-injection-in-angular-2-beta-8.htm for some advantages/disadvantages of using the constructor or a field.

注意:@Query()是@ContentChildren()的不推荐使用的前身

Note: @Query() is the deprecated predecessor of @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

• 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当前只是一个抽象基类.我还没有发现它是否全部用于

Query is currently just an abstract base class. I haven't found if it is used at all https://github.com/angular/angular/blob/2.1.x/modules/@angular/core/src/metadata/di.ts#L145

这篇关于在父组件中获取对子组件的引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！