这个问题在这里已有答案:
在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)
}
}
我在这个plunker中实现了它:http://plnkr.co/edit/e3pEn9Hd54q1mijNGDpR?p=preview
但它似乎是一个黑客,是不是有一个更简单的方法将组件附加到其父变量?
3 回答
你可以用ViewChild
其中
varName
是添加到元素的模板变量 . 或者,您可以按组件或指令类型进行查询 .有ViewChildren,ContentChild,ContentChildren等替代品
@ViewChildren
也可以在构造函数中使用优点是结果可以提前获得 .
因此,使用构造函数或字段的一些优点/缺点也是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
Update
Query
目前只是一个抽象基类 . 我还没有找到它是否被使用https://github.com/angular/angular/blob/2.1.x/modules/@angular/core/src/metadata/di.ts#L145您需要利用
@ViewChild
装饰器通过注入从父组件引用子组件:这是更新的plunkr:http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview .
您可以注意到,也可以使用
@Query
参数装饰器:你可能真的去 ViewChild API ...
parent.ts
child.ts