假设我有这样的模态模板:
<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;
如何将绑定(bind)等放入 NgbModal
html 中?进入 ng-content
最佳答案
您可以从 open 方法返回的 NgbModalRef 中获取对组件实例的引用,并在那里设置绑定(bind)。
这是打开模式的方法:
open() {
const instance = this.modalService.open(MyComponent).componentInstance;
instance.name = 'Julia';
}
这是将在具有一个输入绑定(bind)的模态中显示的组件
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;
}
}
和我的组件:
export class MyComponentComponent {
@Input() tpl;
constructor(private viewContainerRef: ViewContainerRef) {
}
ngAfterViewInit() {
this.viewContainerRef.createEmbeddedView(this.tpl);
}
}
关于javascript - Angular 2 : NgbModal transclude in view,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44359094/