Cara menggunakan TemplateRef dalam perkhidmatan Angular

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

Latar Belakang: Saya berharap dapat merangkum perkhidmatan mesej saya sendiri tetapi saya tidak tahu cara menggunakan html dalam perkhidmatan ini. -ZORRO Komponen Pemberitahuan digunakan sebagai lapisan UI. [Cadangan tutorial berkaitan: "

tutorial video angularjs

"]

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

Tandatangan adalah seperti berikut

Jadi saya memerlukan TemplateRef yang disesuaikan untuk memenuhi keperluan saya

Idea 1NzNotificationService.template

Anda boleh menentukan kaedah dalam perkhidmatan daripada komponen perniagaan Tetapi tiada perbezaan antara menggunakan

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

secara langsung dalam perniagaan dan tidak memerlukan pemprosesan terpusat

Idea 2

Suntikan templat html ke dalam perkhidmatan

NzNotificationService.template Memandangkan Jika anda tidak boleh menulis kod berkaitan HTML secara langsung dalam perkhidmatan, maka gunakan kaedah pertama

tetapi panggil kaedah permulaan terlebih dahulu di tempat yang tiada kaitan dengan perniagaan

Menggunakan

tidak akan menjana Nod dom dan perkhidmatan sebenar berkongsi dua ciri ini secara global Kita boleh menulis kod berikut

message.service.ts

message-service-virtual-. ref.component ng-template

app.component.html

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>

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video Pengaturcaraan

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>

! !

Atas ialah kandungan terperinci Cara menggunakan TemplateRef dalam perkhidmatan Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!