1

我想使用带有子组件的 Ng Bootstrap Modal 作为模态体。我不确定我将如何实现这一目标......

export class ParentComponent {
   @ViewChild("modal") private engineModal: TemplateRef<any>;
   dialog: NgbModalRef | null;

   constructor(private modalService: NgbModal) {}

   openModal(): void {
      this.dialog = this.modalService.open(this.engineModal);
   }

   cancelModal (): void {
      if ( this.dialog ) {
         this.dialog.dismiss();
         this.dialog = null;
      }
   }
}

而且，我知道这是错误的，但最终我想做这样的事情，

<ng-template #modal>
  <app-child-component></app-child-component>
</ng-template>

子组件有很多输入和输出变量，那么这里最好的方法是什么？

4

3 回答 3

1

您可以尝试内容投影（熟悉 AngularJS 的人可以使用嵌入）。

您可以像这样创建自定义模式：

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

然后您基于此自定义模态创建子模态

<custom-modal>
  <child-body>
     {...}
  </child-body>
</custom-modal>

基本上，您在子正文标签之间写的内容将被复制到 ng-content 位置的自定义模态元素中。

在此处阅读有关内容投影的更多信息：

https://angular-2-training-book.rangle.io/handout/components/projection.html

希望这可以帮助！

于 2017-12-13T13:09:21.247 回答
0

您好，是的，您是对的，您必须使用 ViewChild 来执行此操作，然后创建一个使用 open 函数的 open 函数，如下所述： 

open(engineModal) {
   console.log(this.engineModal) // global modal info from ViewChild
   console.log(engineModal) // modal info used for the function
   this.modalService.open(engineModal).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
   }, (reason) => {
   this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});

请参阅 .ts 示例https://ng-bootstrap.github.io/#/components/modal/examples

你只需要这样做，你现在就可以玩你的模态了

编辑：访问您的 ng-template 中的子组件：//不好的方法

@ViewChild(AppChildComponent) appChildComponent: AppChildComponent
this.engineModal.appChildComponent.function()

=> 我会亲自将 ng-template 封装在 ModalInfoComponent、ModalNewsComponent html 中并直接使用我的答案；）

于 2017-12-12T18:59:58.740 回答
0

您可以通过将内容作为输入属性传递来投影内容

<button class="btn btn-lg btn-outline-primary" (click)="open(element.innerHTML)">Launch demo modal</button>
<div #element style="display:none">>
  SOME THING PROJECTED
</div>

您的模态组件应具有以下内容modal-body

<div class="modal-body">
  <div [innerHTML]="modalBody">
  </div>
</div>

具有以下输入属性

@Input() modalBody:string;

更新 1：要更改@Input()父级中的属性值，可以按如下方式完成，

setTimeout(()=>{
    this.modalRef.componentInstance.name = 'Opened After sometime';
},1000)

现场演示

于 2017-12-12T19:04:27.907 回答