假设我有这样的模态模板：
<div class="modal-header"> <h3 [innerHtml]="header"></h3> </div> <div class="modal-body"> <ng-content></ng-content> </div> <div class="modal-footer"> </div>
我从另一个组件调用这个模态,所以：
const modalRef = this.modalService.open(MobileDropdownModalComponent,{
keyboard: false,backdrop: 'static'
});
modalRef.componentInstance.header = this.text;
如何使用绑定等将NgbModal html放入？进入ng-content
解决方法
您可以从open方法返回的NgbModalRef中获取对组件实例的引用,并在那里设置binging.
这是打开模态的方法：
open() {
const instance = this.modalService.open(MyComponent).componentInstance;
instance.name = 'Julia';
}
这里是将使用一个输入绑定在模态中显示的组件
export class MyComponent {
@Input() name: string;
constructor() {
}
}
===
您也可以传递templateRef作为输入.假设父组件有
<ng-template #tpl>hi there</ng-template>
export class AppComponent {
@ViewChild('tpl') tpl: TemplateRef<any>;
constructor(private modalService: NgbModal) {
}
open() {
const instance =
this.modalService.open(MyComponent).componentInstance;
instance.tpl = this.tpl;
}
}
和MyComponent：
export class MyComponentComponent {
@Input() tpl;
constructor(private viewContainerRef: ViewContainerRef) {
}
ngAfterViewInit() {
this.viewContainerRef.createEmbeddedView(this.tpl);
}
}
