假设我有这样的模态模板:
<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); } }
原文地址:https://www.jb51.cc/js/156706.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。