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

小编典典

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

all

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

组件 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但我不明白如何使用它以及如何调用该函数，有人可以帮忙吗？

阅读 82

2022-06-06

共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是一个模板变量，允许从模板的其他地方引用此元素。我们使用它来制作offunction1()的事件处理程序：myEvent``com2

@component({
  selector:'parent',
  template: `<com1 #com1></com1><com2 (myEvent)="com1.function1()"></com2>`
)
export class com2{
}

有关组件之间通信的其他选项，另请参阅组件交互

2022-06-06