使用<ng-content>从父组件传递HTML并显示在模态组件中

Question

我有一个模态组件，它被用于不同的模块。为了使其动态化，我需要从我调用模态的父组件传递设计。

我尝试使用 ng-content 来传递设计，但由于它是模态组件，我不确定如何传递 HTML 以及它如何以模态显示。

从组件调用模式

 const modal = await this.modalController.create({
      component: AutoCompleteModalComponent,
      cssClass: 'fullpage-modal',
    });
   
    return await modal.present();

最终目标是在我调用模态的父组件中插入 HTML（例如，<p>Hello</p>），并且 HTML 应该显示在模态。我希望这可以通过 ng-content 或 ng-templateoutlet 来完成。请帮助我。

Answer 1

我没有使用 ionic 的经验，但您可以尝试以下操作。

在父组件模板中，添加 ng-template 内容到项目。

<ng-template #myModalContent>
  <p>Hello</p>
</ng-template>

使用 viewChild 获取对此模板的引用并将其作为 componentProp 传递

class ParentComponent {
  @ViewChild('myModalContent') modalContent: TemplateRef;

  ...

  yourOpenModalMethod(){
    const modal = await this.modalController.create({
      component: AutoCompleteModalComponent,
      cssClass: 'fullpage-modal',
      componentProps: {
        projectedContent: this.modalContent
      }
    });

    return await modal.present();
  }
}

在 modalComponent 中定义一个 Input 来获取道具。

class AutoCompleteModalComponent {
  @Input() projectedContent: TemplateRef;
  
  ...
}

最后在模态模板中添加一个ng-container来渲染模板

<ng-container [ngTemplateOutlet]="projectedContent"></ng-container>

使用<ng-content>从父组件传递HTML并显示在模态组件中

Use <ng-content> to pass HTML from parent component and display in a modal component

ionic-framework

angular2-ngcontent

angular