javascript – Angular 2:NgbModal在视图中转换

前端之家收集整理的这篇文章主要介绍了javascript – Angular 2:NgbModal在视图中转换前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我有这样的模态模板:
<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.f2er.com/js/156706.html

猜你在找的JavaScript相关文章