Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何在角度2中调用另一个组件函数大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有两个组件如下,我想从另一个组件调用一个函数.这两个组件都使用指令包含在第三个父组件中.

组件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,但我不明白如何使用它,如何调用功能,任何人都可以帮助?

如果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

大佬总结

以上是大佬教程为你收集整理的如何在角度2中调用另一个组件函数全部内容,希望文章能够帮你解决如何在角度2中调用另一个组件函数所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。