Html 在NzMessageService中传递动态TemplateRef Angular 15

更新

如果你只是想配置模板，创建一个单独的组件，它将包含模板，如果你想要不同的模板，只需创建更多的模板引用和单独的方法来打开消息.

包含所有模板的消息容器

import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { NzMessageDataOptions, NzMessageService } from 'ng-zorro-antd/message';
import { MessageService } from '../message-service.service';
import { CustomComponentShowInsideMessageComponent } from './custom-component-show-inside-message/custom-component-show-inside-message.component';

@Component({
  selector: 'app-custom-message',
  template: `
  <ng-template #template>
    <app-custom-component-show-inside-message/>
  </ng-template>
  `,
  imports: [CustomComponentShowInsideMessageComponent],
  standalone: true,
})
export class CustomMessageComponent {
  @ViewChild('template') template!: TemplateRef<void>;

  constructor(private message: MessageService) {}

  ngAfterViewInit() {
    debugger;
    this.message.template = this.template;
  }
}

消息服务

import { Injectable, TemplateRef } from '@angular/core';
import { NzMessageDataOptions, NzMessageService } from 'ng-zorro-antd/message';

@Injectable({
  providedIn: 'root',
})
export class MessageService {
  template!: TemplateRef<void>;

  constructor(private message: NzMessageService) {}

  open(
    type: 'success' | 'info' | 'warning' | 'error' | 'loading' | string,
    customTemplate: TemplateRef<void> = null,
    options: NzMessageDataOptions = null
  ): void {
    this.message.create(type, customTemplate || this.template, options);
  }
}

app组件

import { Component } from '@angular/core';

import { MessageService } from './message-service.service';

@Component({
  selector: 'nz-demo-message-info',
  template: ` 
  <button nz-button [nzType]="'primary'" (click)="createBasicMessage()">Display normal message</button> 
  <app-custom-message/>
  `,
})
export class NzDemoMessageInfoComponent {
  constructor(private message: MessageService) {}

  createBasicMessage() {
    this.message.open('error', null, { nzDuration: 80000 });
  }
}

stackblitz个