Как передать компонент как модальное тело в модальности Ngx-bootstrap в Angular 6 - PullRequest
Новая
       15

Как передать компонент как модальное тело в модальности Ngx-bootstrap в Angular 6

0 голосов
/ 04 января 2019

Я использую ngx-bootstrap для модального в Angular 6, я создал один общий модал, в который я хочу добавить различные HTML-шаблоны в разделе модального тела. Как добавить шаблон HTML или Как я могу передать динамические компоненты в общий модал.

Общий модальный компонент: 

@Component({
selector: 'modal-content',
template: `
<div class="modal-header">
  <h4 class="modal-title">{{headerText}}</h4>
</div>
  <div *ngIf="showTemplate" class="modal-body">
   <templateselector></templateselector>
 </div>
<div class="modal-footer">
  <button  type="button" class="btn btn-primary" (click)="clickOk()"> 
  {{actionButtonText}}</button>
</div>
`
 })
export class ModalContentComponent{
 headerText: string; 
 actionButtonText: string;
 showTemplate: boolean;
 templateselector: any;  

 constructor(public bsModalRef: BsModalRef) { }

 clickOk() {
    this.bsModalRef.hide();
 }

Вызывающий компонент: 

@Component({
selector: 'modal-content',
template: `
   <div>
  <button type="button" class="btn" 
  (click)="openModalWithComponent()">modal</button>
   </div>`
  })

export class DynamicComponent{

constructor(public bsModalRef: BsModalRef) { }

openModalWithComponent(message: string, title: string) {
    const initialState = {
        headerText: title, 
        actionButtonText: "Continue",
        showTemplate: true,
        templateSelector : NewComponent //From here i need to pass different 
        //HTML which should get load in Modal body.
};
    this.bsModalRef = this.modalService.show(ModalContentComponent, { 
    initialState });

}

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

...