如何在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,允许从模板中的其他地方引用此元素。 我们使用这个来为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
它取决于你的组件(父/子)之间的关系,但是使通信组件最好/通用的方法是使用共享服务。
有关更多详情,请参阅此文档:
这就是说,你可以使用下面的代码将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())。