Angular9 模态使用 Promise

Question

I am trying to make a modal in Angular 9 that returns a Promise as result. I don't know how to move the promise logic outside of the declaration.

<a class="button-primary" (click)="yes()">Yes</a>
<a class="button-default" (click)="no()">No</a>

This is the modal controller

import { Component, OnInit, HostBinding } from '@angular/core';

@Component({
  selector: 'change-username-modal',
  templateUrl: './change-username-modal.component.html',
  styleUrls: ['./change-username-modal.component.less']
})
export class ChangeUsernameModalComponent implements OnInit {

  @HostBinding('class.show')
  show: boolean = false;

  constructor() { }

  ngOnInit(): void {
    console.log('init');
  }

  public open(): Promise<boolean> {
    return new Promise(function(resolve, reject) {
      resolve(true);
    });
  }

  yes() {
    //this.myPromise.resolve(true);
    this.show = false;
  }

  no() {
    //this.myPromise.reject(false);
    this.show = false;
  }

}

I need to make the Promise resolve or reject when calling the yes() or no() functions. Thank you in advance!

Answer 1

You could use Observable approach instead of promise. you need a simple subject which will emit and complete immediately (for avoiding memory leak). the code should look like this

export class Component{

  @HostBinding('class.show')
  show: boolean = false;

  private _emitter$ = new Subject<boolean>();

  constructor() { }

  ngOnInit(): void {
    console.log('init');
  }

  public open(): Observable<boolean> {
    return this._emitter.asObservable();
  }

  yes() {
    //this.myPromise.resolve(true);
    this.show = false;
    this.emitAndClose(true);
  }

  emitAndClose(answer:boolean){
     this._emitter.next(answer);
     this._emitter.complete();
  }

  no() {
    this.emitAndClose(false);
    this.show = false;

  }

}

now whenever answer is clicked, it will emit the value and complete the subject so you don't need unsubscribe outside