带有子组件的Angular2引导模式

Question

我想使用带有子组件的 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>

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

Answer 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

希望这会有所帮助！

Answer 2

您好，是的，您是对的，您必须使用 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 中并直接使用我的答案；）

Answer 3

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

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

LIVE DEMO