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

Question

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

@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，则可以从结果中返回一个可观察到的内容（ngb-pop返回一个promise。

在stackblitz中，我基于弹出窗口的最简单示例放了一个简单示例

您有一个返回可观察值的函数。看到我们使用catchError，是因为在ngb-popup中，“关闭”或“ esc”或“外部单击”落入了Promise错误

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