我有两个组件如下,我想从另一个组件调用一个函数.这两个组件都使用指令包含在第三个父组件中.
组件1：
@component(
selector:'com1'
)
export class com1{
function1(){...}
}
组件2：
@component(
selector:'com2'
)
export class com2{
function2(){...
// i want to call function 1 from com1 here
}
}
如果com1和com2是兄弟姐妹,可以使用
@component({
selector:'com1',})
export class com1{
function1(){...}
}
com2使用EventEmitter发出一个事件
@component({
selector:'com2',template: `<button (click)="function2()">click</button>`
)
export class com2{
@Output() myEvent = new EventEmitter();
function2(){...
this.myEvent.emit(null)
}
}
在这里,父组件添加事件绑定以监听myEvent事件,然后在发生此类事件时调用com1.function1().
#com1是一个模板变量,允许从模板中的其他位置引用该元素.我们使用它来make1()com2的myEvent的事件处理程序：
@component({
selector:'parent',template: `<com1 #com1></com1><com2 (myEvent)="com1.function1()"></com2>`
)
export class com2{
}
有关组件之间通信的其他选项,请参见https://angular.io/docs/ts/latest/cookbook/component-communication.html