弹出窗口仅在执行完整代码后呈现

Question

我有一个自定义确认弹出窗口（是/否），我通过角度打字稿文件（TS）调用

parentpage.ts

export class ManageConfigs implements OnInit,AfterViewInit  {
  @ViewChild('warning') warning: any;

    var retVal = this
                   .warning
                   .showWarningWithConfirmation("Are you sure you want to delete this?");
}

根据按钮选择（是/否），弹出窗口将返回值true或false。这意味着retVal将是真/假。

但问题是弹出窗口是在调用线后呈现的。

var retVal = this
               .warning
               .showWarningWithConfirmation(
                  "Are you sure you want to ",
                  "delete region " +regionName + "?"
               );

popup.ts

public showWarningWithConfirmation(messageLine1,messageLine2): boolean {
  this.visible = true; 
  setTimeout(() => this.visibleAnimate = true, 100);  
  return this.retWarningValue;
}

popup.html

    <div class="container-fluid" id="main-content" (click)="this.visibleAnimate = false;this.visible = false" [@hideShowAnimator]="hideShowAnimator">
      <div class="custom-modal modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
          <div class="modal-dialog modal-sm" role="document">
              <div class="modal-content">
                  <!--  Error with confirmation Begins -->
                  <div *ngIf="this.notificationType=='errorWithConfirmation';">
                      <div class="modal-header">
                          <h4 class="modal-title" id="myModalLabel">Delete User</h4>
                      </div>
                      <div class="modal-body">
                          <form>
                              <div class="row">
                                  <div class="col-sm-4 text-center">
                                      <i class="fa fa-times-circle dialog-icon text-wipro-red" aria-hidden="true"></i>
                                  </div>
                                  <div class="col-sm-8">
                                      <p>Delete user?</p>
                                      <p>Please confirm</p>
                                  </div>
                              </div>
                          </form>
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-custom-default btn-outline btn-round btn-sm" (click)="this.visibleAnimate = false;this.visible = false">No</button>
                          <button type="button" class="btn btn-custom-primary btn-round btn-sm" (click)="this.visibleAnimate = false;this.visible = false">Yes</button>
                      </div>
                      <br>
                  </div>
                  <!-- Error with confirmation Ends -->
                </div>
              <!-- Sucesss Ends-->    
          </div>
      </div>
  </div>

如何解决问题？