Question

我正在尝试在诺言被触发时返回一个可观察值。我正在使用ng-bootstrap打开模式，我想通过可观察的方式处理承诺回报。

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

}

这是我从其中调用可观察对象的标题组件，也是我订阅的地方

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>'。

很长时间以来，我一直在努力做到这一点，而没有任何实际进展，将不胜感激。

Answer 1

您在服务打开方法中犯了错误。切勿在可见的情况下使用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);
      }
    );
  }

Answer 2

您可以使用内置的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+以上，只需使用{{ 1}}或导入Observable.from()。

试图用可观察的东西包装诺言

2 个答案: