angular – 如何从EventEmitter函数返回值？

发布时间：2020-12-17 08:01:23 所属栏目：安全来源：网络整理

导读：我的核心组件中有这个功能： isValid(value: any) { // Do some stuff and return something based on the result return false; } 我将其传递给其他组件,如下所示： other-component (onBeforeAdding)="isValid($event)"/other-component 在其他组件中,我得

我的核心组件中有这个功能：

isValid(value: any) {

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

   return false;
 }

我将其传递给其他组件,如下所示：

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

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

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

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

 if (isValid) {

   // Do stuff
 }

这里的问题是EventEmitter函数不能返回一个值,因为它是异步的(虽然从rc2看起来这似乎是可选的,将true传递给新的EventEmitter函数？但这样做不会解决这个问题).因此无论函数返回什么,isValid将始终为true.

如何从EventEmitter函数返回值？

简短的回答是你不能用@Output做到这一点,但是你可以用@Input做一些非常相似的事情.

核心组件中的相同功能：

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

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

<other-component [onBeforeAddingProcessor]="isValid"></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
  }
}

访问它的方法

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!