我有一個模態組件，它被用于不同的模塊。為了使其動態化，我需要從呼叫模態的父組件傳遞設計。
我嘗試使用 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來完成。請幫助我。
uj5u.com熱心網友回復：
我沒有使用離子的經驗，但您可以嘗試以下方法。
在父組件模板中，添加一個帶有專案內容的 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432951.html
上一篇：在打字稿中將函式作為引數傳遞