Question

我有两个组件componentA和componentB。他们都是兄弟姐妹，都是componentMother的孩子。

单击componentA时，事件处理程序A触发并处理click事件。 如何将此事件传递给组件B并由事件处理程序B处理？

欢迎任何评论。欢迎一些代码。谢谢

Answer 1

冒着听起来有些粗略的风险，您必须经过妈妈。兄弟姐妹不能直接互相交谈。

如果我对您的理解正确，那么您的mother.component.html看起来会像这样：

public static LatLng snapToPolyline(LatLng currentLocation) {
    LatLng snappedLatLng = null;

    Location current = new Location("current");
    current.setLatitude(currentLocation.latitude);
    current.setLongitude(currentLocation.longitude);

    Integer minConfirmCount = 0;
    float currentMinDistance = 0, previousMinDistance = 0;
    List<Float> distances = new ArrayList<>();

    for (LatLng point: mSplitPoints.subList(mMinorIndexTravelled, mSplitPoints.size() - 1)) {
        Location pointLoc = new Location("pointLoc");
        pointLoc.setLatitude(point.latitude);
        pointLoc.setLongitude(point.longitude);

        distances.add(current.distanceTo(pointLoc));
        previousMinDistance = currentMinDistance;
        currentMinDistance = Collections.min(distances);

        if (currentMinDistance == previousMinDistance) {
            minConfirmCount++;
            if (minConfirmCount > 10) {
                mMinorIndexTravelled = distances.indexOf(currentMinDistance) + mMinorIndexTravelled;
                snappedLatLng = mSplitPoints.get(mMinorIndexTravelled);

                break;
            }
        }
    }

    return snappedLatLng;
}

<comp-a (your-event)="handleEvent()"></comp-a> <comp-b></comp-b>提供的方法应该在您的handleEvent()上存在，因为Angular中的事件（MotherComponent）总是向上传递给其父级。

然后在EventEmitter中将事件传递到MotherComponent：

CompBComponent

对于这种相对简单的情况，这很好。如果您必须向上移动多层，然后始终向下移动多层，则此解决方案很快就会变得很麻烦。创建具有某种export class MotherComponent { @ViewChild(CompBComponent) compB: CompBComponent; handleEvent() { this.compB.doStuff(); } }属性的可注射服务可能会更合适。

p.s。我不太懂Dart，所以希望TypeScript示例对您有意义。

Answer 2

使用EventEmitter将事件发送到motherComponent。参见：https://angular.io/api/core/EventEmitter

Answer 3

将事件传递给父级是最佳做法，但是还有另一种方法。您可以使用var ref耦合组件。

<compA #a ></compA><compB [clickStream]="a.click"></compB>

class CompA {
  StreamController _onClick = new StreamController();
  @Output()
  Stream click = _onClick.stream;
}

class CompB {
  @Input()
  set clickStream(Stream stream) {
    stream.listen(() {
      // Do work here on click
    });
  }
}

再次，这不是最佳做法，但应该可以。

angulardart：将事件传递给另一个组件

3 个答案: