Question

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

void RunAction((Shape shape, Color color, Material material) item)
{
    switch(item)
    {
        case var i1 when i1.color == Color.red && i1.shape == Shape.square:
        case var i2 when i2.color == Color.blue:
            // Do action...
            break;
        case var i1 when i1.shape == Shape.trangle && i1.material == Material.metal:
            // Do action...
            break;
        default:
            // Do action...
            break;
    }
}

这甚至有可能吗？

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

Answer 1

可以使用公共服务从另一个组件触发事件/功能。例如：ComponentA的click事件将调用服务方法。然后，该服务方法应发出另一个事件。然后，ComponentB应该订阅服务的事件发射器。样例代码： ChildA（HTML）：

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

ChildA Controller（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：在一个组件中调用一个函数，在另一个组件上调用事件

2 个答案: