Вызвать модал внутри SwitchMap в резольвере angular2

Question

У меня есть требование отображать модальное всплывающее окно на основе предупреждающего сообщения в угловом преобразователе. Я делаю сервисный вызов API и использую комбинированные списки, которые возвращают несколько ответов. Мне нужно отобразить модальное всплывающее окно на основе результата ответа службы 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 возвращает обещание.

В stackblitz Я приведу простой пример, основанный наСамый простой пример всплывающего окна

У вас есть функция, которая возвращает наблюдаемое. Посмотрите, что мы используем catchError, потому что в ngb-popup ошибки "close", "esc" или "click outside" падают в ошибке обещания

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