将组件动态传递给另一个通用组件？

Question

使用 Angular2+ 并希望将内容组件传递给通用模态组件。

应该传递内容组件的组件

openModal() {
    // open modal component
    const modalRef = this.modalService.open(NgbdModalComponent);

    // attach variable values and functions
    modalRef.componentInstance.name = this.name;
    modalRef.componentInstance.content = this.content;
    modalRef.componentInstance.buttonName = this.buttonName;
    modalRef.componentInstance.buttonClass = this.buttonClass;
    modalRef.componentInstance.onConfirm = () => this.onConfirm();
    modalRef.componentInstance.onClose = () => this.onClose();
    // pass content component dinamically?
  }

模态组件.ts

export class NgbdModalComponent {
  name: string;
  content: string;
  buttonName: string;
  buttonClass: string;

  onConfirm: () => void;
  onClose: () => void;

  constructor(public activeModal: NgbActiveModal) {}

  confirm(): void {
    this.onConfirm();
  }

  close(): void {
    this.onClose();
  }
}

模态组件.html

<div class="modal-header">
  <h4 class="modal-title">{{name}}</h4>
  <button type="button" class="close" aria-label="Close" (click)="close()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
 **Component shoud land here**
</div>
<div class="modal-footer">
  <button type="button" [class]="buttonClass" (click)="confirm()">
    <span>{{buttonName}}</span>
  </button>
</div>

为了保持模态窗口的通用性，实现它的最佳方法是什么？

注意：

• 我不能使用不能用于组件插入的 innerHTML
• 我不能使用 ng-content，因为我没有将模态窗口称为 组件而不是使用 const modalRef = 动态实例化它 this.modalService.open(NgbdModalComponent);
• 不应使用第三方库
• 我想重用 modalRef.componentInstance 将组件附加到 modal.html 中所需的位置

Answer 1

您可以在角度模板中使用ng-content 指令将内容传递给组件

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

然后您可以使用以下内容调用该组件：

<my-modal-window title=”My custom title”>
      This content comes from the parent component. 
      I want to add some <b>HTML content</b>
      into it with dynamic expressions to display the {{name}}
      of the current user.
</my-modal-window>