时间戳

首页 > 解决方案 > 如何在角度服务中创建 html 模板并将其用作 htmlTemplateRef？

html - 如何在角度服务中创建 html 模板并将其用作 htmlTemplateRef？

问题描述

我正在做一个大型项目，我需要一个要求。

我正在使用一个可以为我打开对话框（模态）弹出窗口的库。为此，我需要为该开放模式进程配置一些选项，如下所示：

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'} })
}

但我不知道如何在角度服务中使用 html 模板。

如何在 htmlhtml template中使用angular service？如果有人知道答案，请在此处提及。

标签： htmlangulartemplatesservice

解决方案

您可以通过以下两种方式之一进行：

  1. 创建一个组件，该组件在初始化时将模板传递给服务，然后将组件加载到视图中的某个位置。
  2. templateRef调用ShowModal函数时传递：this.modalService.ShowModal(templateRef, data)

选项 1 感觉更自然，因为您可以真正轻松地创建模态，而选项 2 适用于每个选项之间模态完全不同的情况，例如当您要填写表格时等。

这是一个显示选项 1 的片段（并使用指令添加了另一个转折）

推荐阅读