Angular 9 ngx bootstrap: ошибка открытия модального окна - PullRequest
Новая
       65

Angular 9 ngx bootstrap: ошибка открытия модального окна

0 голосов
/ 11 июля 2020

Всем привет,

У меня возникла проблема с использованием модального окна в angular с ngx bootstrap.

Мой модальный файл находится в отдельном компоненте, и я использую тему для отправки событие, чтобы открыть его.

Моя проблема: когда я нажимаю кнопку, чтобы открыть модальную, предметную работу (я регистрирую событие в консоли), но модальное окно не появляется. Div ngbmodal с модальным содержимым находится на странице DOM => js, по-видимому, загружается правильно.

что странно, когда я перехожу на другую страницу, модальное окно выглядит как magi c ... ...

Не могли бы вы мне помочь:)

Модальный компонент html:

image

Модальный компонент 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');
  }

Спасибо.

1 Ответ

0 голосов
/ 13 июля 2020

Я нахожу решение. Я неправильно использую ngx bootstrap.

Я просто использую: 

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

И удаляю ссылку на модальный шаблон в шаблон родительского компонента: 

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

Большое спасибо.

...