如何在angular2中调用另一个组件函数

我有两个组件,如下所示,我想从另一个组件调用一个函数。 这两个组件都包含在使用指令的第三个父组件中。

组件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 } } 

我已经尝试使用@input@output但我不明白如何使用它,以及如何调用该function,任何人都可以帮忙吗?

如果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是一个模板variables,允许从模板中的其他地方引用此元素。 我们使用这个来为myEventcom2创buildfunction1()事件处理函数:

 @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

它取决于你的组件(父/子)之间的关系,但是使通信组件最好/通用的方法是使用共享服务。

有关更多详情,请参阅此文档:

这就是说,你可以使用下面的代码将com1的一个实例提供给com2:

 <div> <com1 #com1>...</com1> <com2 [com1ref]="com1">...</com2> </div> 

在com2中,您可以使用以下内容:

 @Component({ selector:'com2' }) export class com2{ @Input() com1ref:com1; function2(){ // i want to call function 1 from com1 here this.com1ref.function1(); } } 
  • 可以说第一个组件是DbstatsMainComponent
  • 第二个组件DbstatsGraphComponent。
  • 第一个组件调用第二个组件的方法-displayTableGraph()

<button (click)="dbgraph.displayTableGraph()">Graph</button> <dbstats-graph #dbgraph></dbstats-graph>

注意子组件上的局部variables#dbgraph,父组件可以用它来访问它的方法(dbgraph.displayTableGraph())。