Angular サービスで TemplateRef を使用する方法

コード リポジトリ github.com/rick-chou/a…

背景:独自のメッセージ サービスをカプセル化したいと考えていますが、サービスで HTML を使用する方法がわかりません。以下は解決策の 1 つです。

NG-ZORRO 通知コンポーネントは UI レイヤーとして使用されます。 [関連チュートリアルの推奨事項: 「angularjs ビデオ チュートリアル 」]

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

NzNotificationService.template 署名は次のとおりです

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

したがって、ニーズを満たすためにカスタマイズされた TemplateRef が必要です

アイデア 1

メソッドを定義できます。サービス ビジネス コンポーネントから渡しますが、ビジネス NzNotificationService.template で直接使用することに違いはなく、集中処理は必要ありません

アイデア 2

Give service Inject html template

サービス内に HTML 関連のコードを直接書くことはできないので、アイデア 1 の方法に従います

事前に初期化メソッドを呼び出すだけですビジネスとは関係のない場所

ng-template を使用すると、実際の dom ノードは生成されず、サービスはグローバルに共有されます。これら 2 つの機能を使用すると、次のコードを書くことができます

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 サービスで TemplateRef を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。