Используйте экземпляр дочернего компонента в качестве опоры в angular

Question

Я создал basicModalComponent, который отвечает за базовые c действия, такие как закрытие, отправка, отображение верхнего и нижнего колонтитула. Хорошо работает, чтобы помещать простые сообщения в тело моего модала.

Но я бы хотел иметь возможность передать дочерний компонент для управления своим телом, что-то вроде этого:

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

, который позаботился бы о более сложной логике c .

Пока что так выглядит тело в моем basicModalComponent

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

Очевидно, что он хорошо работал со строковым текстом, но не сейчас, когда я хочу поставить здесь дочерний компонент.

Вот результат:

И, если возможно, с данными от родителя во время реализации

Но я не знаю, возможно ли это или хороший шаблон. Я предполагаю, что это возможно, поскольку именно это и делает modalController на самом деле с моим BasicModalComponent, но я все еще не уверен насчет шаблона. Я смотрел на наследование и композицию, но мне так и не удалось заставить его работать.

У вас есть какие-нибудь идеи / советы? Заранее спасибо.

Answer 1

Хорошо, я понял это, используя динамический c компонент загрузки

Я добавил это в свой 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 в этом пример

Спасибо за ваше время.

Answer 2

Это хорошо объяснено на ioni c рамочном сайте

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