Comment utiliser TemplateRef dans le service angulaire

code repo github.com/rick-chou/a…

Contexte : J'espère encapsuler mon propre service de messagerie mais je ne sais pas comment utiliser le HTML dans le service. Voici. une de mes solutions Solution

Parce que j'utilise le composant Notification de NG-ZORRO comme couche d'interface utilisateur. [Recommandations de didacticiel associées : "tutoriel vidéo angulairejs"]

https://ng.ant.design/components/notification/en

NzNotificationService.template La signature est la suivanteNzNotificationService.template 签名如下

template(template: TemplateRef, options?: NzNotificationDataOptions): NzNotificationRef;

所以我需要自定义的 TemplateRef 来满足我的需求

思路一

可以在 service 中定义方法 从业务组件中传入 但是这样和直接在业务中使用 NzNotificationService.template 没有什么区别 也就没有集中处理的必要了

思路二

给 service 注入 html template

既然不能直接在 service 中书写 html 相关代码 那就沿用思路一的方法

只不过事先在一处与业务无关的地方调用初始化的方法

利用 ng-template

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<emessagecode>>();
  constructor(private notificationService: NzNotificationService) {}

  // 初始化 templateRef
  public initTemplate(message: EMessageCode, ref: TemplateRef<any>): void {
    this.templateMap.set(message, ref);
  }

  public showMessage(messageCode: EMessageCode) {
    switch (messageCode) {
      case EMessageCode.XXXError:
        return this.notificationService.template(<templateref>>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);
  }
}</templateref></any></emessagecode>

J'ai donc besoin d'un TemplateRef personnalisé pour répondre à mes besoins

Idée 1

Vous pouvez définir des méthodes dans le service et les transmettre à partir du composant métier, mais cela est la même chose que directement dans l'entreprise. Il n'y a aucune différence lors de l'utilisation de NzNotificationService.template, il n'y a donc pas besoin d'un traitement centralisé

Idée 2 h3>

Injectez le modèle HTML dans le service

Depuis Si vous ne pouvez pas écrire de code HTML directement dans le service, suivez la méthode de l'idée 1

Il appelle simplement la méthode d'initialisation à l'avance dans un endroit qui n'a rien à voir faire avec les affaires

L'utilisation de ng-template ne générera pas le vrai Le nœud dom et le service partagent ces deux fonctionnalités globalement. Nous pouvons écrire le code suivant🎜🎜message.service.ts🎜

import { Component, TemplateRef, ViewChild, AfterViewInit } from '@angular/core';
import { EMessageCode, MessageService } from './message.service';

@Component({
  selector: 'app-message-service-virtual-ref',
  template: `
    <ng-template>
      <div>
        <span></span>
        <span>
          There are XXXError, you must refer to
          <a>something</a>
          to check out
        </span>
      </div>
    </ng-template>
  `,
})
export class MessageServiceVirtualRefComponent implements AfterViewInit {
  @ViewChild('xxx_ref') xxxTemplateRef!: TemplateRef<any>;

  constructor(private messageService: MessageService) {}

  ngAfterViewInit(): void {
    this.messageService.initTemplate(EMessageCode.XXXError, this.xxxTemplateRef);
  }
}</any>

🎜message. -service-virtual-ref.component🎜

<app-message-service-virtual-ref></app-message-service-virtual-ref> 
<router-outlet></router-outlet>

🎜app.component.html🎜rrreee🎜 Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Vidéos de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!