在 angular2 解析器中调用 SwitchMap 内的模态

Question

我需要根据 angular 解析器中的警告消息显示模态弹出窗口。我正在对 API 进行服务调用并使用 combineLatest 和 SwitchMap returning 多个响应。我需要根据 API 服务响应结果显示模态弹出窗口，并在显示并单击该模态弹出窗口时重定向到不同的路由。否则，解析器可以 return 多个响应。我试过下面的代码，在调试时，我的模态没有被点击和跳过，并且 returns 没有响应。在下面的代码中要进行哪些更改，以便在出现任何警告消息时，可以显示模态并路由到不同的页面？我已经搜索了其他问题，但看不到像这样的相关问题。

@Injectable()
export class TestResolver implements Resolve<{ aResponse: AResponse, bRepsonse: BResponse, cRepsonse: CResponse[] }> {

  constructor(private testservice: TestService, private modalService: ModalService, private router: Router) { }

  resolve(route: ActivatedRouteSnapshot)
    : Observable<{ aRes: AResponse, bRes: BRepsonse, cRes: CRepsonse[] }> {

    const a = this.testservice.getAResponse()
    const b = this.testservice.getBResponse()
    const c = this.testservice.getCResponse()

    return combineLatest(a, b, c).pipe(

      switchMap(([aRes, bRes, cRes]) => {
        const aData = aRes.someData
        const bData = bRes.someData
        const cData = cRes.someData

        const warningMessage = GetWarningMessage(aRes)
        if (warningMessage) {
          this.modalService.create<ModalComponent>(ModalComponent, {
            message: warningMessage,
            modalLabel: '',
            closeLabel: 'Close',
            close: () => this.router.navigate(['..']),
          })
        }
        return of({ aRes: aData, bRes: bData, cRes: cData})
      })
    )
  }
}

Modal.Component.ts

import { Component, Input } from '@angular/core'

@Component({
  template: `
    <div class="brick brick--vertical">
      <div class="brick__wrapper">
        <div class="brick__content">
          <h2 id="modal_label" [innerHTML]="modalLabel"></h2>
          <div class="message-content" [innerHTML]="message"></div>
          <div class="buttons">
            <div class="buttons__group">
              <button df-button="primary" id ="close_button" (click)="close()">{{ closeLabel }}</button>
            </div>
          </div>
        </div>
      </div>
    </div>`
})

export class ModalComponent {
  @Input() message = ''
  @Input() closeLabel = 'Close'
  @Input() modalLabel = ''


  close: () => any
}

Answer 1

如果您正在使用 ngb-bootstrap，您可以 return 从结果中观察到一个结果（ngb-pop return 一个承诺。

在stackblitz我放了一个简单的例子基于最简单的popUp例子

您有一个 return 可观察的函数。看到我们使用 catchError 因为在 ngb-popup 中 "close" or "esc" or "click outside" fall in promise error

open(content) {
    this.modalRef=this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'})

    return from(this.modalRef.result).pipe(catchError((error) => {
        return of(this.getDismissReason(error))
      }));
}

那么您可以订阅该功能，例如

click(content)
  {
    this.open(content).subscribe(res=>{
      console.log(res)
    })
  }

或者在你的情况下，有些像

switchMap(([aRes, bRes, cRes]) => {
   ....
   return this.open(content).map(res=>{
      //here you has the response of the popUp
      if (res=="Save Click")
      {
         ......
         return true
      }
      return false
   })
}

在 angular2 解析器中调用 SwitchMap 内的模态

Invoke modal inside SwitchMap in angular2 resolver

angular

angular2-services

switchmap

combinelatest

angular-resolver