在 angular 中使用 child 组件实例作为道具

Question

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

但我希望能够通过 child-component 来管理我的 body，像这样：

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

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

目前，body 在我的 basicModalComponent

中是这样显示的

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

显然，它与 string-text 配合使用效果很好，但现在我想在这里放置一个 child 组件。

这里是结果：

如果可能的话，在实例化过程中使用来自 parent 的数据

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

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

Answer 1

这在 ionic framework site

上有很好的解释

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

Answer 2

好的，所以我想通了，使用 dynamic component loading

我已将其添加到我的 BasicModalCompoment


@ViewChild('modalcomponent', {read: ViewContainerRef}) modalBodyComponent: ViewContainerRef;

ngAfterViewInit() { 
  if(this.isBodyAComponent()) {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.body);
    this.modalBodyComponent.clear();
    const componentRef = this.modalBodyComponent.createComponent(componentFactory);

    // settings data to my child Component
    setTimeout(() => {
      (<any>componentRef.instance) = Object.assign((<any>componentRef.instance), this.bodyProps);
    })
  }
}

因此，我可以将组件作为模态主体以及字符串进行传递。

this.modal = await this.modalController.create({
  component: BasicModalComponent,
  componentProps: {
    title: `Share!`,
    body: ChildContentViewComponent,
    bodyProps: {
      url: this.url
    }
  }
});

在我的 ChildContentViewComponent 中，我可以访问我的参数，如该示例中的 url

感谢您的宝贵时间。

在 angular 中使用 child 组件实例作为道具

Use child component instance as a prop in angular

components

parent-child

ionic-framework

angular