使用 Promise 的 Angular 9 模态答案

【问题标题】：Angular9 Modals using Promise使用 Promise 的 Angular 9 模态
【发布时间】：2020-06-14 02:49:27
【问题描述】：

我正在尝试在 Angular 9 中创建一个返回 Promise 作为结果的模式。我不知道如何将承诺逻辑移到声明之外。

<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() 函数时，我需要使 Promise 解析或拒绝。提前谢谢！

【问题讨论】：

你可以做到这一点，很简单，用 observables，你坚持要承诺吗？
我认为承诺更优雅，因为我只需要模态的一次性回答
嗯，我认为 observable 也不是优雅的解决方案。例如，您可以使用 switchmap 管道链接您的答案并立即发送 api 请求......只需将其视为 Angular httpclient，即使它是唯一一次的答案，它仍然返回可观察的
不过不管怎样，如果你还需要promise，你可以看看这个链接stackoverflow.com/questions/26150232/…
有一篇文章我可以找到可观察的方法吗？或者也许你可以回答它，这样我就可以投票并检查它

标签： javascript angular promise

【解决方案1】：

您可以使用 Observable 方法代替 Promise。您需要一个简单的主题，它将立即发出并完成（以避免内存泄漏）。代码应该是这样的

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;

  }

}

现在只要点击答案，它就会发出值并完成主题，因此您不需要在外面取消订阅

【讨论】：

在你回答之前我做了几乎相同的事情，但是在再次打开它之后，我会得到 2 个结果，所以你的 .complete 方法，现在这很优雅。非常感谢！