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

prop を取得するには、modalComponent で Input を定義します。

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

最後に、モーダル テンプレートに ng-container を追加して、テンプレートをレンダリングします。

<ng-container [ngTemplateOutlet]="projectedContent"></ng-container>
于 2022-02-19T19:57:30.833 に答える