如何在 angular 服務中創建 html 模板並將其用作 htmlTemplateRef？

Question

我正在做一個大型項目，我需要一個要求。

我正在使用一個可以為我打開對話框（模態）彈出窗口的庫。 為此，我需要為該開放模式過程配置一些選項，如下所示：

this.modalService.template(template, { data : { fruit: 'apple'} })

並且template變量聲明如下：

@ViewChild(TemplateRef, { static: false }) template: TemplateRef<{}>;

但是為此我們需要一個我沒有的 html 模板文件。

我的服務是這樣的：

@ViewChild(TemplateRef, { static: false }) template: TemplateRef<{}>;

constructor() {
}

ShowModal(){
   this.modalService.template(template, { data : { fruit: 'apple'} })
}

但我不知道如何在 angular 服務中使用 html 模板。

如何在angular service中使用 html html template ？ 如果有人知道答案，請在此處提及。

Answer 1

您可以通過以下兩種方式之一進行：

1. 創建一個組件，該組件在初始化時將模板傳遞給服務，然后將組件加載到視圖中的某個位置。
2. 調用ShowModal時傳遞templateRef function： this.modalService.ShowModal(templateRef, data)

選項 1 感覺更自然，因為您可以真正輕松地創建模態，而選項 2 適用於每個選項之間模態完全不同的情況，例如當您要填充 forms 等時。

這是一個顯示選項 1 的片段（並使用指令添加了另一個轉折）