Angular: 在一个组件中调用函数，在另一个组件中调用事件

Question

使用 Angular6，假设我有 2 个子组件 A、B，它们都是父组件 P 的一部分。我想在组件 A 上使用表单输入 - 所以一旦单击，字符串值将通过 并触发组件 B 上的函数。可能是这样的：

functionOnB(valueFromA: string) { //some code here; }

这可能吗？

我已经使用 angular 的 EventEmitter 在组件之间成功传输了数据，但是是否可以使用此数据调用函数，而不仅仅是传递原始信息？

Answer 1

可以使用一个公共服务从另一个组件触发 event/function。例如：ComponentA 的点击事件会调用一个服务方法。然后，该服务方法应发出另一个事件。 ComponentB 然后应该订阅服务的事件发射器。示例代码：孩子 A (HTML):

<button (click)="onClick()"></button>

ChildA 控制器 (TS)：

  onClick() {
    this.commonService.AClicked('Component A is clicked!!');
  }

公共服务 (TS)：

import { Injectable, EventEmitter, Output } from '@angular/core';

@Output() aClickedEvent = new EventEmitter<string>();

AClicked(msg: string) {
  this.aClickedEvent.emit(msg);
}

ChildB 控制器 (TS)：

  ngOnInit() {
    this.commonService.aClickedEvent
    .subscribe((data:string) => {
      console.log('Event message from Component A: ' + data);
    });
  }

Answer 2

是的，您可以使用@Input 装饰器将组件引用传递给另一个组件。通过这种方式，您可以从 ComponentA 调用 ComponentB 方法。

例如，在 FirstComponent 中声明了一个类型为 SecondComponent 的实例变量：

 @Input()
 second: SecondComponent;

然后在您的父级 HTML 中传递组件引用：

 <app-first [second]="second"></app-first>
 <app-second #second></app-second>

Component Interaction Cookbook

这里有一个工作示例： Component Interaction Example

Angular: 在一个组件中调用函数，在另一个组件中调用事件

Angular: invoking a function in one component, with events on another component

eventemitter

angular

angular-event-emitter