Передайте любой компонент в мое модальное окно с помощью ngx- bootstrap

Question

Я хочу создать модальное всплывающее окно с именем Dynami c, и для этого мне нужно, чтобы контент был компонентом, который может варьироваться.

В настоящее время в моем modal.component.html у меня есть это:

<div class="modal-container">
  <div class="modal-backdrop">
  </div>
  <div class="modal-card">
    <div class="modal-header">
      <a></a>
    </div>
    <div>
      <div #componentPlaceHolder></div>
    </div>
  </div>
</div>

И в моем modal.component.ts this:

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
})
export class ModalCComponent implements OnInit{

  @ViewChild('componentPlaceholder', { read: ViewContainerRef }) componentPlaceholder: ViewContainerRef;

  constructor(private modalService: BsModalService) {}

  ngOnInit() {
  }

}

Я хочу создать службу, содержащую вызываемый метод, например showModal () и который зависит от того, где он вызывается, показать в модальном режиме тот или иной компонент, но мне это не удалось. Я попытался сделать BsModalService a .show (ModalCComponent), но не знаю, как показать настраиваемый компонент в `#componentPlaceHolder. Как я могу показать определенный c компонент, который передает параметры методу showModal?

Answer 1

То, что вы пытаетесь сделать, можно сделать с помощью двух компонентов (или службы и компонента).

1. Компонент / служба, которая вызывает modalService для открытия модального окна, содержащего отображаемое содержимое ( модальный компонент)
2. Компонент, который имеет фактический модальный шаблон внутри

Пример компонента, который вызывает modalService для открытия модального окна с использованием компонента в качестве содержимого

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit{

  constructor(private modalService: BsModalService) {}

  ngOnInit() {
    // This has an optional second argument which can pass extra data
    this.modalService.show(ModalComponent);
  }

}

Дополнительная информация в актуальной документации: https://valor-software.com/ngx-bootstrap/# / modals # service-component