0

I have a requirement of displaying modal popup based on warning message inside angular resolver. I am making a service call to API and using combineLatest and SwitchMap returning multiple responses. I need to display modal popup based on API service response result and redirect to different route if that modal pop up shown and clicked. Otherwise, resolver can return mutiple responses. I have tried below code and when debugging, my modal is not being hit and skipped and returns the responses. what changes to be done in below code so that when any warning message available, modal could be shown up and route to different page? I have searched other questions and could not see relevant like this. 

@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
}
4

1 回答 1

1

如果你使用 ngb-bootstrap，你可以从结果中返回一个 observable（ngb-pop 返回一个 promise.

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

您有一个返回可观察对象的函数。看到我们使用了 catchError，因为在 ngb-popup 中，“close”或“esc”或“click outside”属于 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
   })
}
于 2019-10-06T09:47:58.880 回答