Question

我在core组件中获得了此功能：

 isValid(value: any) {

   // Do some stuff and return something based on the result

   return false;
 }

我将这样传递到other-component：

<other-component (onBeforeAdding)="isValid($event)"></other-component>

在other-component中我得到了这个EventEmitter函数，它应该在其他事情之前运行并返回一个值，表明值是否有效：

 @Output() onBeforeAdding: EventEmitter<any> = new EventEmitter();

 let isValid = this.onBeforeAdding.emit(value) || true;

 if (isValid) {

   // Do stuff
 }

这里的问题是EventEmitter函数不能返回一个值，因为它是异步的（虽然从rc2看来这似乎是可选的，将true传递给new EventEmitter函数？即使这样做也赢了然而，不解决这个问题）。因此，无论函数返回什么，isValid始终为真。

如何从EventEmitter函数返回值？

Answer 1

简短的回答是，您无法使用@Output执行此操作，但您可以使用@Input执行非常类似的操作。

core组件中的相同功能：

isValid(value: any): boolean {
  // Do some stuff and return something based on the result
  return false;
}

将函数定义作为other-component传递给@Input：

<other-component [onBeforeAddingProcessor]="isValid"></other-component>

在other-component：

@Input() onBeforeAddingProcessor: (value: any) => boolean;

ngOnInit() {
  // onBeforeAddingProcessor won't be defined in the constructor
  let isValid = this.onBeforeAddingProcessor(value);

  if (isValid) {
    // Do stuff
  }
}

访问`this`

的方法

如果您必须在您提供的函数中访问this，则必须传递已经具有此上下文绑定的方法：

isValid = (value: any) => {
  return this.myService.checkValue(value);
}

否则，Angular会使用组件的this调用该方法，而不是组件的使用者。关于性能的小提示（虽然未经过测试）：如果此方法很大且组件的实例数很高，那么您应该将代码的较大部分分解为私有成员函数，并从它的位置调用此函数因素考虑在内。原因：上面没有在类的原型上创建函数，而是为组件的每个实例标记了此函数的副本。这可能会占用大量内存，这很容易避免。

Answer 2

您需要订阅事件发射器以获取值：

this.onBeforeAdding.emit(value || true);

this.onBeforeAdding.subscribe(isValid => {
  if (isValid) {
    // Do stuff
  }
});

Answer 3

无需太多努力即可实现

在子组件中创建 EventEmitter

@Output('request_data') requestData: EventEmitter = new EventEmitter();
在子组件中创建一个请求数据的方法，这里的技巧是传递一个带有匿名函数的对象

点击（）{ this.requestData.emit({ 数据：“一些数据”，功能：（data_from_parent => { //做你想做的 }) }); }
从你的父组件，做任何你想做的事并调用函数

callFromChild(obj) { //obj.data //obj.func(); }

Answer 4

发光功能向所有侦听器发送广播信号，传递您确定的值。我认为 isValid 逻辑需要发出事件，因为 EventEmitter 的 Responsibillity 是发出事件而不是验证事物。你究竟想写这个isValid flow？

Answer 5

我建议你建立一个小例子。

但这是我理解你的问题的方法。

我认为你应该使用EventEmitter的另一个属性，因为你试图从核心组件返回isValid（），而EventEmitter只是一条单行道。

所以我会创建一个可观察的变量并分配给其他组件，因此它可以订阅它。执行isValid（）时，使用next发布新值。

一个简单的例子就像您可以从表单控件订阅valueChanges。

@Isaac的答案是使用@input但是如果你想使用observable，我的解决方案会更合适。

如何从EventEmitter函数返回值？

5 个答案:

访问`this`

如何从EventEmitter函数返回值？

5 个答案:

访问this

访问`this`