如何在Angular service中使用TemplateRef

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

##背景：我希望封裝一個自己的message service 但是我不知道如何在service 中使用html 以下是我的一個解決方案

##因為我使用的NG-ZORRO的Notification 元件來做UI 層。 【相關教學推薦：《

angularjs影片教學

》】

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

NzNotificationService.template

簽章如下<pre class="brush:php;toolbar:false">template(template: TemplateRef, options?: NzNotificationDataOptions): NzNotificationRef;</pre>所以我需要自訂的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<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>

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: `
    <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>

app.component.html

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

更多程式相關知識，請造訪：

程式設計影片

！ ！

以上是如何在Angular service中使用TemplateRef的詳細內容。更多資訊請關注PHP中文網其他相關文章！