如何在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，任何人都可以帮忙吗？

Answer 1

如果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，允许从模板中的其他地方引用此元素。 我们使用这个来为myEvent的com2创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

Answer 2

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

有关更多详情，请参阅此文档：

• https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

这就是说，你可以使用下面的代码将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(); } } 

Answer 3

• 可以说第一个组件是DbstatsMainComponent
• 第二个组件DbstatsGraphComponent。
• 第一个组件调用第二个组件的方法-displayTableGraph（）

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

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