(资料图片)
因为我使用的 NG-ZORRO 的 Notification 组件来做 UI 层。【相关教程推荐：《angularjs视频教程》】
NzNotificationService.template签名如下
template(template: TemplateRef<{}>, options?: NzNotificationDataOptions): NzNotificationRef;登录后复制所以我需要自定义的 TemplateRef 来满足我的需求
思路一
可以在 service 中定义方法 从业务组件中传入 但是这样和直接在业务中使用 NzNotificationService.template没有什么区别 也就没有集中处理的必要了
思路二
给 service 注入 html template
既然不能直接在 service 中书写 html 相关代码 那就沿用思路一的方法
只不过事先在一处与业务无关的地方调用初始化的方法
利用 ng-template不会生成真实的 dom 节点 以及 service 是全局共享 这两个特性三 我们就可以写出如下代码
message.service.ts
import { Injectable, TemplateRef } from "@angular/core";import { NzNotificationService } from "ng-zorro-antd/notification";export enum EMessageCode { XXXError = 1024, YYYError = 1025,}export const MESSAGE = { [EMessageCode.XXXError]: "XXXError...", [EMessageCode.YYYError]: "YYYError...",};@Injectable({ providedIn: "root",})export class MessageService { private templateMap = new Map(); constructor(private notificationService: NzNotificationService) {} // 初始化 templateRef public initTemplate(message: EMessageCode, ref: TemplateRef): void { this.templateMap.set(message, ref); } public showMessage(messageCode: EMessageCode) { switch (messageCode) { case EMessageCode.XXXError: return this.notificationService.template(this.templateMap.get(messageCode), { nzDuration: 0, }); case EMessageCode.YYYError: { return this.notificationService.error("YYYError", MESSAGE[EMessageCode.YYYError]); } } } public removeMessage(messageId?: string) { this.notificationService.remove(messageId); }} 登录后复制message-service-virtual-ref.component
import { Component, TemplateRef, ViewChild, AfterViewInit } from "@angular/core";import { EMessageCode, MessageService } from "./message.service";@Component({ selector: "app-message-service-virtual-ref", template: ` There are XXXError, you must refer to something to check out `,})export class MessageServiceVirtualRefComponent implements AfterViewInit { @ViewChild("xxx_ref") xxxTemplateRef!: TemplateRef; constructor(private messageService: MessageService) {} ngAfterViewInit(): void { this.messageService.initTemplate(EMessageCode.XXXError, this.xxxTemplateRef); }}登录后复制app.component.html
登录后复制更多编程相关知识，请访问：编程视频！！
以上就是如何在Angular service中使用TemplateRef的详细内容，更多请关注php中文网其它相关文章！
