Angular 2：NgbModal在视野中转换 [英] Angular 2: NgbModal transclude in view

问题描述

假设我有这样的模态模板：

Let's say i have such modal template:

<div class="modal-header">
  <h3 [innerHtml]="header"></h3>
</div>

<div class="modal-body">
  <ng-content></ng-content>
</div>

<div class="modal-footer">
</div>

我正在从另一个组件调用此模态，所以：

and i'm calling this modal from another component so:

    const modalRef = this.modalService.open(MobileDropdownModalComponent, {
      keyboard: false,
      backdrop: 'static'
    });

    modalRef.componentInstance.header = this.text;

---

我如何投入 NgbModal 带绑定等的HTML？进入 ng-content

---

How can i put into NgbModal html with bindings etc? Into ng-content

推荐答案

您可以获得对组件的引用来自NgbModalRef的实例由open方法返回并在那里设置binging。

You can get a reference to the component instance from NgbModalRef returned by open method and set the binging there.

这里是打开模态的方法：

here is method that open the modal:

open() {
   const instance = this.modalService.open(MyComponent).componentInstance;
   instance.name = 'Julia';
 }

这里是一个输入绑定将在模态中显示的组件

and here is the component that will be displayed in the modal with one input binding

export class MyComponent {
   @Input() name: string;

   constructor() {
   }
 }

===

您也可以传递templateRef作为输入。假设父组件有

You can pass a templateRef as input as well. Let say the parent component has

 <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：

and MyComponent:

export class MyComponentComponent {
  @Input() tpl;

  constructor(private viewContainerRef: ViewContainerRef) {
  }

  ngAfterViewInit() {
     this.viewContainerRef.createEmbeddedView(this.tpl);
  }
}

这篇关于Angular 2：NgbModal在视野中转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！