Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

angular - How to return a value from an EventEmitter function?

I got this function in my core component:

 isValid(value: any) {

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

   return false;
 }

Which I pass to the other-component like this:

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

And in other-component I got this EventEmitter function which should run before other things and return a value stating that a value is valid or not:

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

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

 if (isValid) {

   // Do stuff
 }

The problem here is that an EventEmitter function can't return a value since it's asynchronous (although from rc2 it seems that this is optional by passing true to the new EventEmitter function? Even doing so won't fix this issue however). So isValid will always be true regardless of what the function returns.

How can I return a value from the EventEmitter function?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The short answer is you can't do this with @Output, but you can do something very similar with @Input.

Same function in core component:

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

Pass the function definition in to other-component as an @Input:

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

In 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
  }
}

Methods accessing this

If you have to access this in the function you provide, then it's necessary to pass a method which already has the this-context bound:

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

Otherwise Angular calls the method with this of the component, not the consumer of the component. Small hint regarding performance (though not tested): if this method is large and the instance-count of the component is high, then you should factor out the bigger parts of the code to a private member function and call this function from where it was factored out. Reason: Above does not create a function on the prototype of the class, but stamps out a copy of this function for each instance of the component. This can consume a lot of memory which can be avoided easily.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...