使用子组件实例作为 Angular 中的 prop

Question

我创建了一个basicModalComponent，它负责处理基本操作，例如关闭、提交、显示页眉和页脚。将简单的消息放入我的模态正文中效果很好。

但我希望能够传递一个子组件来管理我的身体，如下所示：

this.modal = await this.modalController.create({
  component: BasicModalComponent,
  componentProps: {
    title: `Share!`,
    body: ChildContentViewComponent,
    bodyProps: {... some data here},
    // body: new ChildContentViewComponent({some data here}),
    confirm: this.onConfirmDeleteAction,
    cancelButton: true
  }
});

这将处理一些更复杂的逻辑。

现在，这就是身体在我的中显示的方式basicModalComponent

<p class="modal-body text-center scrollable scrollbar-hidden">
  {{body}}
</p>

显然，它与字符串文本配合得很好，但现在我想在这里放置一个子组件。

结果如下：

如果可能的话，在实例化期间使用来自父级的数据

但我不知道这是否可能或一个好的模式。我认为这是可能的，因为这就是modalController我实际上正在做的事情BasicModalComponent，但我仍然不确定这种模式。我研究过继承和组合，但也没有成功。

您有什么想法/建议吗？提前致谢。

Answer 1

这在离子框架网站上有很好的解释

// Create instance with ProfileComponent as child component
let profileModal = this.modalCtrl.create(ProfileComponent , { userId: 8675309 });
profileModal.present();