code repo github.com/rick-chou/a…
##背景：我希望封裝一個自己的message service 但是我不知道如何在service 中使用html 以下是我的一個解決方案
##因為我使用的NG-ZORRO的Notification 元件來做UI 層。 【相關教學推薦：《
NzNotificationService.template
簽章如下<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">template(template: TemplateRef, options?: NzNotificationDataOptions): NzNotificationRef;</pre><div class="contentsignin">登入後複製</div></div>所以我需要自訂的TemplateRef 來滿足我的需求
思路一
沒有什麼區別也就沒有集中處理的必要了思路二
既然不能直接在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>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-message-service-virtual-ref></app-message-service-virtual-ref> <router-outlet></router-outlet>
以上是如何在Angular service中使用TemplateRef的詳細內容。更多資訊請關注PHP中文網其他相關文章！
