Warm tip: This article is reproduced from serverfault.com, please click
angular html service templates

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

(其他 - how to create html template in angular service and use it as a htmlTemplateRef?)

发布于 2020-12-07 04:39:49

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

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

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模板。

如何html template在中使用html angular service？如果有人知道答案，请在这里提及。

Questioner
mayur kukadiya
Viewed
0
分享
Moshezauros 2020-12-07 13:02:14

你可以通过以下两种方式之一进行操作：

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

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

这是一个显示选项1的代码片段（并使用指令添加了另一种形式）

mayur kukadiya 2020-12-07 05:25:00

感谢您的回复。我一定会尝试这段代码

Wolf 2021-03-19 11:01:03

@mayurkukadiya您是否同时尝试过，如果可以，请尝试接受此答案（答题者获得+15的收入，而您获得+2的收入）

热门帖子

1
家庭 or 个人用的 NAS 有什么可以推荐的吗？
2
远程兼职 Web3 工程师
3
请假理由填写问题
4
[烟台大樱桃] 人生不只有上班一条路，被裁后决定专心转行做水果
5
这大约是独立开发的顶流了吧， v 友们怎么看
6
6 年软开求职 国外务工求职比如澳新美等地
7
银行功能测试工程师
8
V 友们 今年刚需 需要买车 预算 20 出头 极氪 007 可以入吗
9
黑群和白群的差异，如何选择？
10
急收点发票（电脑、笔记本、硬盘、nas 、 iPad 、服务器、交通、鼠标、键盘）

热门github

1
Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information (翻译：论文实现——YOLOv9: Learning What You Want to Learn using Programmable Gradient Information（利用可编程梯度信息学习您想学的内容）)
2
A Windows and Office activator using HWID / Ohook / KMS38 / Online KMS activation methods, with a focus on open-source code and fewer antivirus detections. (翻译：使用 HWID / KMS38 / Online KMS 激活方法激活 Microsoft 产品的脚本集合，重点是开源代码、较少的防病毒检测和用户友好性。)
3
Get up and running with Llama 2, Mistral, Gemma, and other large language models. (翻译：启动并运行 Llama 2、Mistral、Gemma 和其他大型语言模型。)
4
该项目可以让你通过订阅的方式使用Cloudflare WARP+，自动获取流量。This project enables you to use Cloudflare WARP+ through subscription, automatically acquiring traffic.
5
Multi functional app to find duplicates, empty folders, similar images etc. (翻译：多功能应用程序可查找重复项、空文件夹、相似图像等。)
6
Xray panel supporting multi-protocol multi-user expire day & traffic & ip limit (Vmess & Vless & Trojan & ShadowSocks & Wireguard) (翻译：Xray面板支持多协议多用户到期日&流量&IP限制（Vmess & Vless & Trojan & ShadowSocks & Wireguard)
7
The Free Software Media System (翻译：Jellyfin 是一个免费软件媒体系统，可让您控制管理和流式传输您的媒体。它是专有 Emby 和 Plex 的替代方案，通过多个应用程序从专用服务器向最终用户设备提供媒体。)
8
lightweight, standalone C++ inference engine for Google's Gemma models. (翻译：适用于 Google Gemma 模型的轻量级独立 C++ 推理引擎。)
9
📚 Freely available programming books (翻译：📚 免费提供的编程书籍)
10
A collective list of free APIs (翻译：免费 API 的集合列表)
11
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java (翻译：十亿行挑战 —— 使用 Java 对文本文件中的 10 亿行数据进行聚合的有趣探索)
12
🎓 Path to a free self-taught education in Computer Science! (翻译：🎓计算机科学免费自学教程！)
13
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA... (翻译：从零开始学习 Python 编程语言的课程，适合初学者)
14
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems (翻译：该存储库包含系统设计资源，在准备面试和学习分布式系统时非常有用)
15
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention. (翻译：Mamba 是一种新的状态空间模型架构，在信息密集型数据（例如语言建模）上显示出良好的性能，而之前的二次模型在 Transformers 方面存在不足。它基于结构化状态空间模型的进展，并本着FlashAttention的精神进行高效的硬件感知设计和实现。)