Angular 9 ngx bootstrap：模态打开错误

Question

大家好，

我在 angular 和 ngx bootstrap 中使用模态时遇到问题。

我的模式在一个单独的组件中，我使用一个主题发送一个事件来打开它。

我的问题：当我单击按钮打开模态时，主题工作（我在控制台中记录事件）但模态没有出现。具有模态内容的 ngbmodal div 在 DOM 页面中 => js 显然已正确加载。

这很奇怪，当我导航到另一个页面时，模态看起来像魔术......

你能帮帮我吗:)

模态组件 html :

<ng-template #add_file let-c="close" let-d="dismiss">
  <div class="modal-body p-0">
    <a class="closeBtn" (click)="d('Cross click')">
      <img src="../../assets/images/icones/picto/closePopup.png"/>
    </a>
    <h2>{{ 'ad.add.file' | translate }}</h2>
  </div>
  <div>
    <form [formGroup]="addPostForm" (ngSubmit)="onSubmit(addPostForm.value)">
      <app-file-upload formControlName="file" [progress]="progress" [type]="mediaType"></app-file-upload>
      <button class="button" type="submit">{{ 'ad.add.file.submit' | translate }}</button>
    </form>
  </div>
</ng-template>

模态组件 ts :

  @Input() modalAddFileSubject: Subject<any>;
  @Output() pictureAddEvent = new EventEmitter();
  @ViewChild('add_file') modal: TemplateRef<any>;
  private subscriptions: Subscription;
  mediaType: MediaType;
  private downloadURL: string;
  addPostForm;
  progress;
  private modalRef: NgbModalRef;

  constructor(private modalService: NgbModal,
              private formBuilder: FormBuilder) {
  }

  ngOnInit(): void {
    this.subscriptions = new Subscription();
    this.initializeModal();
  }

  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }

  initializeModal() {
    this.subscriptions.add(this.modalAddFileSubject.subscribe(type => {
      console.log('Ajout post of type : ', type);
      this.mediaType = type;
      this.addPostForm = this.formBuilder.group({
        file: new FormControl(null, Validators.required),
      });
      this.modalRef = this.modalService.open(this.modal);
    }));
  }

  handleFileInput(event) {
    console.log(event.target.files);
  }

  onSubmit(postData) {
    this.pictureAddEvent.emit(postData);
    this.modalRef.close();
  }

具有模态开放主题的父组件：

  addPicture() {
    this.modalAddFileSubject.next('image');
  }

谢谢。

Answer 1

我找到了解决办法。我以错误的方式使用 ngx bootstrap。

我只是使用：

this.modalRef = this.modalService.show(FileAdComponent);

然后我将模态模板引用删除到父组件模板中：

<app-file-ad [modalAddFileSubject]="modalAddFileSubject (pictureAddEvent)="addPictureAd($event)"></app-file-ad>

非常感谢。

Angular 9 ngx bootstrap：模态打开错误

Angular 9 ngx bootstrap : modal opening bug

modal-dialog

ngx-bootstrap

angular