typescript Angular 2 - 获取组件实例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35567019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 - Get component instance
提问by Jon...
I have two components like these:
我有两个这样的组件：
@Component({
selector: 'comp1',
template: `<h1>{{ custom_text }}</h2>`
})
export class Comp1 {
custom_text:string;
constructor(text:string) {
this.custom_text = text;
}
}
/*********************************************/
@Component({
selector: 'comp2',
directives: [Comp1],
template: `
<b>Comp 2</b>
<comp1></comp1>
`
})
export class Comp2 {
constructor() {
// ...
// How to send my own text to comp1 from comp2
// ...
}
}
Is it possible to send my own text from comp1to comp2?
是否可以将我自己的文本从 发送comp1到comp2？
Is it possible to get the comp1instance from comp2?
是否可以从 获取comp1实例comp2？
Thanks.
谢谢。
采纳答案by Chibi Chakaravarthi
Yes it is very easy to accomplish that,
是的，很容易做到这一点，
Checkout the Tutorial : MULTIPLE COMPONENTSPart 3 of the Angular2 Tutorials to see how to send inputs.
查看 Angular2 教程的教程：MULTIPLE COMPONENTS第 3 部分，了解如何发送输入。
@Component({
selector: 'comp1',
template: `<h1>{{customText}}</h2>`,
inputs: ['customText']
})
export class Comp1 {
public customText:string;
constructor(text:string) {
this.customText= text;
}
// ngOnChange to make sure the component is in sync with inputs changes in parent
ngOnChanges() {
this.customText= text;
}
}
/*********************************************/
@Component({
selector: 'comp2',
directives: [Comp1],
template: `
<b>Comp 2</b>
<comp1 customText = "My Custom Test"></comp1>
`
})
export class Comp2 {
constructor() {
}
}
Try it out and let me know how it went.
试试看，让我知道它是怎么回事。
回答by Mark Rajcok
comp2 is the parent of comp1, so
comp2 是 comp1 的父级，所以
- to send data from child to parent (comp1 to comp2) add an OutputPropertyto the child:
@Output() someEvent = newEventEmitter();
andemit()an event on it:this.someEvent.emit('some text');
The parent will need to bind to the output property/event:<comp2 (someEvent)="someHandler()"></comp2> - to get a reference to an instance of a child component (comp2 gets an reference to comp1), use
@ViewChildor@Queryin comp2:@ViewChild(Comp1) viewChild:comp1;You can then accessthis.comp1inngAfterViewInit(), or later in the component's lifecycle.
- 要将数据从子级发送到父级（comp1 到 comp2），向子级添加一个OutputProperty:
@Output() someEvent = newEventEmitter();
和emit()一个事件：this.someEvent.emit('some text');
父级需要绑定到输出属性/事件：<comp2 (someEvent)="someHandler()"></comp2> - 要获取对子组件实例的引用（comp2 获取对 comp1 的引用），请使用
@ViewChild或@Queryin comp2:@ViewChild(Comp1) viewChild:comp1;然后您可以访问this.comp1inngAfterViewInit()，或在组件生命周期的后期访问。
