Question

我创建了一个基本对话框组件以在屏幕上显示弹出窗口以进行确认。该组件不适用于异步调用。我想在收到服务响应后显示弹出窗口。我正在使用Angular 6和Bootstarap 3.3

以下是我的基本组件ts文件：-

@Component({
  selector: 'basic-dialog',
  styleUrls: ['./dialog.component.scss'],
  templateUrl: './dialog.component.html',
  animations: [
    trigger('dialogState', [
      transition(':enter', [
        style({ transform: 'translateY(-100%)' }),
        animate('900ms ease-in', style({ transform: 'translateY(0%)' }))
      ]),
      transition(':leave', [animate('100ms ease-in', style({ transform: 'translateY(-100%)' }))])
    ])
  ]
})
export class DialogComponent implements OnChanges, OnDestroy {
  @Input() visible = false;
  @Input() modalId = '';
  @Input() styles: any;

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private renderer: Renderer2,
    private element: ElementRef,
    private changeDetectorRef: ChangeDetectorRef
  ) {}
  ngOnChanges(): void {
    if (this.visible) {
      this.element.nativeElement.querySelector('.modal').id = this.modalId;
      document.querySelector('body').appendChild(this.element.nativeElement);
      this.changeDetectorRef.detectChanges();
    }
  }
  ngOnDestroy(): void {
    if (this.element.nativeElement.parentElement.tagName.toUpperCase() === 'body'.toUpperCase()) {
      document.querySelector('body').removeChild(this.element.nativeElement);
      if (document.querySelector('.modal-backdrop')) {
        document.querySelector('body').removeChild(document.querySelector('.modal-backdrop'));
      }
    }
  }
}

HTML文件：-

<div class="modal fade" [id]="modalId" role="dialog" aria-label="close" style="display: none;">
  <div class="modal-dialog" [ngStyle]="styles">
    <div class="uil-dialog-card x-overflow-hidden">
      <!-- <button  *ngIf="closable" (click)="close()" aria-label="Close" type="button" class="close" data-dismiss="modal">
              <img class="svg" src="../assets/theme/img/cross_icon.svg">
          </button>-->
      <div id="modal_content">
        <ng-content></ng-content>
      </div>
    </div>
  </div>
</div>

仪表板文件ts文件：-

ngOnInit(): void {
    this.visible = false;
    this.loginService.dashboardModuleChangeMsg.subscribe(data => {
      this.displayModuleChangePopup(data);
    });
}

  /** To display Dialog box */
  displayModuleChangePopup(data): void {
      this.visible = true;
      this.changeDetectorRef.detectChanges();
  }
      /** Event handler for continue button in Dialog box */
  onSubmitHandler(): void {
   // code
  }
  /** Event handler for cancel button in Dialog box */
  onCancelHandler(): void {
  // code
  }

仪表板html文件：-

<basic-dialog *ngIf="visible" [visible]="visible" [modalId]="MODULE_SWITCH_DIALOG" [styles]="{'max-width':'434px'}">
            <div class="row">
                <div class="uil-card-title-area" style="margin-bottom:20px">
                    <div class="uil-card-title">
                        Module Navigation
                    </div>
                </div>
                <div id="text_inputs_body">
                    You are trying to navigate to another module. Any unsaved data will be lost.
                </div>
                <div class="alignRight">
                    <button type="button" data-dismiss="modal" class="uil-btn-flat uil-flip-button" (click)="onCancelHandler(user)">Cancel</button>
                    <button type="button" data-dismiss="modal" class="uil-btn uil-tooltip" (click)="onSubmitHandler(user);">Continue</button>
                </div>
            </div>
        </basic-dialog>

弹出窗口不会在第一次显示，而是在第二次订阅者触发的弹出窗口被显示时。如果我在没有异步调用的情况下运行此弹出窗口，则可以正常工作。

basic-dialog组件无法通过异步调用正常运行

0 个答案: