试图用一个可观察的来包装一个承诺答案

【问题标题】：trying to wrap a promise with an observable试图用一个可观察的来包装一个承诺
【发布时间】：2018-10-04 23:23:19
【问题描述】：

我试图在触发 promise 时返回一个 observable。我正在使用 ng-bootstrap 打开一个模式，我想通过 observable 处理 promise 返回。

import { Injectable } from '@angular/core';
//modal/popups
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
// observable
import { Observable  } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class AdminModalService {

  constructor(public ngbModal:NgbModal) {


  }

    open(component:any):Observable<any>{
     const modalRef = this.ngbModal.open(component); //this will return a promise
      modalRef.result.then((result) => {
              console.log('result', result);
              this.myObservable(result);
            }, (reason) => {
              //handle modal dismiss
              console.log('reason', reason);
              this.myObservable(result);
            });

    }

     myObservable(data){
        return new Observable((observer) => {
              observer.next(data);
         observer.complete();
        })
     }

}

这是我调用 observable 的标头组件，也是我订阅它的位置

import { Component, OnInit } from '@angular/core';
// components
import { ModalComponent from'../../../../shared/components/modal/modal.component';
// services
import { AdminModalService } from '../../../../shared/services/modal-service/modal-service.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

constructor(public adminModalService: AdminModalService) {};


  ngOnInit() {
  }

openModal(){

    this.adminModalService.open(ModalComponent).subscribe(
      (res: any[]) => {
        console.log('res', res);
      }
    );
  }

}

这是我收到的错误：错误 TS2322：类型 'Promise<void>' 不可分配给类型 'Observable<any>'。

我已经尝试了很长时间没有任何实际进展，希望得到任何帮助或指导

【问题讨论】：

标签： angular promise observable

【解决方案1】：

您可以使用内置的fromPromise 运算符更轻松地做到这一点。

import { fromPromise } from 'rxjs/observable';

export class AdminModalService {

  constructor(public ngbModal:NgbModal) {


  }

    open(component:any):Observable<any>{
     const modalRef = fromPromise(this.ngbModal.open(component));

      modalRef.subscribe(/*Do your thing!*/);

    }

}

它完全符合您的要求，但已经包含在创建方法中。

注意：在 RxJS 6.0+ 中，fromPromise 功能已被封装到 from 创建运算符中，因此如果您在 6.0+ 中，只需使用 Observable.from() 或导入 @改为 987654326@。

【讨论】：

永远不要订阅你的 observable in service。
同意（除非 obx 很热）；我只是在证明 modalRef 现在是一个 Observable。
在 RxJS 6.0 中 Observable.from() 不存在。请改用从"rxjs" 导入的from()。

【解决方案2】：

您的服务打开方法有误。永远不要在 observable 中使用 promise。始终将您的承诺转换为可观察的。

open(component:any):Observable<any>{
     const modalRef = this.ngbModal.open(component); //this will return a promise
      return Observable.fromPromise(modalRef.result);
    }

在你的组件中这样使用：

openModal(){

    this.adminModalService.open(ModalComponent).mergeMap(result => {
      return this.adminModalService.myObservable(result);
    }).subscribe(
      (res: any[]) => {
        console.log('res', res);
      }
    );
  }

【讨论】：