angular - 使用子组件实例作为角度的道具

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但我仍然不确定这种模式。我看过继承和组合，但也没有设法让它工作。

你有什么想法/提示吗？提前致谢。

标签： angularionic-frameworkcomponentsparent-child

Answer 1

这在离子框架网站上得到了很好的解释

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