0

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

我尝试使用 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来完成。请帮助我。

4

1 回答 1

2

我没有使用离子的经验，但您可以尝试以下方法。

在父组件模板中，添加一个带有项目内容的 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>
于 2022-02-19T19:57:30.833 回答