使用允诺的Angular9模型

Question

我试图在角9中建立一个模态，结果是返回一个承诺。我不知道如何将承诺逻辑移出声明之外。

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

这是模态控制器

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

}

在调用yes()或no()函数时，我需要做出承诺、解决或拒绝。提前谢谢你！

Answer 1

你可以用可观察的方法代替承诺。您需要一个简单的主题，它将立即发出并完成(以避免内存泄漏)。代码应该如下所示

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;

  }

}

现在，无论何时单击答案，它都会发出值并完成主题，因此不需要在外部取消订阅。