ngx-bootstrap Как открыть модальное окно из другого компонента?

Я пытаюсь открыть модальное окно из другого компонента, однако я продолжаю получать эту ошибку TypeError: Cannot create property 'validator' on string 'test1' при загрузке component1.html, потому что childModal включен. Как я могу избавиться от этих ошибок и правильно реализовать это?

component1.html

<button type="button" class="btn btn-outline-primary btn-lg" (click)="modal.showModal()">Test
......
<child-modal #childModal ></child-modal>

component1.ts

 @ViewChild('childModal') childModal: ModalComponent;

modal.html

<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog>
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
          <input type="text" formControl="test1">
          <input type="text" formControl="test2">
          </div>
     </div>
</div>

modal.component.ts

constructor(private modalService: BsModalService) {
    this.form = new FormGroup({
      'test':                     new FormControl(),
      'test2':                    new FormControl()
      }) 
 }

angular twitter-bootstrap ngx-bootstrap
person derrickrozay    schedule 11.10.2017    source источник
comment
Можете ли вы воспроизвести это в плункере?   -  person yurzui    schedule 12.10.2017

Ответы (3)


arrow_upward
16
arrow_downward

Если вы пытаетесь открыть модальный компонент из другого компонента, то это правильный способ сделать это с помощью ngx-bootstrap:

import { Component } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';

/* This is the Component from which we open the Modal Component */
@Component({
  selector: 'my-component',
  templateUrl: './service-component.html'
})
export class MyComponent {
  bsModalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  public openModalWithComponent() {
    /* this is how we open a Modal Component from another component */
    this.bsModalRef = this.modalService.show(ModalContentComponent);
  }
}

/* This is the Modal Component */
@Component({
  selector: 'child-modal',
  template: `
    <div class="modal-header">
      <h4 class="modal-title pull-left">Title</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button>
    </div>
  `
})
export class ChildModalComponent {
  constructor(public bsModalRef: BsModalRef) {}
}

шаблон Компонента, вызывающего Модальный:

<button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Create modal with component</button>

Поэтому вам НЕ следует включать модальный компонент в шаблон следующим образом:

 <child-modal #childModal ></child-modal>

Официальный документ:

https://valor-software.com/ngx-bootstrap/#/modals#service-component

person Francesco Borzi    schedule 12.10.2017
comment
Как я могу вызвать openModalWithComponent() из HTML-страницы других компонентов? Разве он не должен существовать в том же компоненте, чтобы его можно было так называть? - person derrickrozay; 12.10.2017
comment
как я показал в своем ответе, на HTML-странице другого компонента вы можете инициировать выполнение метода (в моем примере метод запускается openModalWithComponent() нажатием <button>). Затем из этого метода вы можете открыть любой модальный компонент, используя this.modalService.show(ModalContentComponent), предполагая, что modalService имеет тип BsModalService, как показано в моем коде. - person Francesco Borzi; 12.10.2017
comment
Не работает. Я пытаюсь вызвать this.bsModalRef = this.modalService.show(ModalComponent); из приведенного выше кода, и он просто показывает оверлей, но фактическая страница не отображается. В приведенном выше примере оба компонента находятся в разных файлах? Вот как я его настроил, мне не нужен один файл, так как у меня будет 3 разных мода - person derrickrozay; 12.10.2017
comment
Хорошо, я разобрался. Пришлось вынести ссылку на bsmodal в дочернем компоненте. Теперь проблема в том, что после удаления первой строки modal.html модальное окно теперь открывается маленьким, а не большим. Кстати, спасибо за вашу помощь! - person derrickrozay; 13.10.2017
comment
@derrickrozay, пожалуйста, отметьте ответ как принятый, если он решит вашу проблему. По другому вопросу ищите или открывайте отдельный вопрос - person Francesco Borzi; 13.10.2017
comment
Я получаю сообщение об ошибке No component factory found for <component>. Did you add it to @NgModule.entryComponents?. Мой код в точности такой, как у вас здесь, что я делаю не так? - person janedoe; 05.08.2018

arrow_upward
-2
arrow_downward

вам нужно только добавить свой дочерний компонент в entryComponents в вашем модуле следующим образом:

entryComponents: [
    childComponent
]

меня устраивает

person jordanG    schedule 25.10.2019

arrow_upward

arrow_downward

person    schedule
comment
Если вы используете тот же компонент, то в заголовке вопроса говорится об обратном, как открываться из другого компонента. - person Ben Thurley; 19.12.2018
comment
Дело в том, что вы не ответили на заданный вопрос. - person Ben Thurley; 20.12.2018
comment
@AnikeshDhanokar @ViewChild('template') elementView: ElementRef; сделал свое дело - person Deep 3015; 18.02.2019