Ng-neat/hot-toast自定义组件常规配置项失效问题咨询

这个需求完全可以实现，问题出在你的自定义服务和组件没有正确传递、接收并应用原HotToastService的配置项。下面是具体的修复步骤：

1. 自定义服务中传递完整配置 #

在封装的自定义toast服务里，调用HotToastService的方法时，要把调用方传入的所有配置（包括autoClose、dismissible）完整传递，不要只传部分参数。

示例代码：

import { Injectable } from '@angular/core';
import { HotToastService, HotToastConfig } from '@ngneat/hot-toast';

@Injectable({ providedIn: 'root' })
export class CustomToastService {
  constructor(private hotToastService: HotToastService) {}

  show(message: string, config?: Partial<HotToastConfig>) {
    // 合并自定义默认配置与调用方传入的配置，后者优先级更高
    const mergedConfig = {
      toastComponent: CustomToastComponent,
      ...config
    };
    this.hotToastService.show(message, mergedConfig);
  }
}

2. 自定义组件中接收并应用配置 #

你的CustomToastComponent需要注入HotToastRef来获取当前toast的配置，然后根据配置控制组件行为：

示例代码：

import { Component } from '@angular/core';
import { HotToastRef } from '@ngneat/hot-toast';

@Component({
  selector: 'app-custom-toast',
  templateUrl: './custom-toast.component.html'
})
export class CustomToastComponent {
  constructor(public toastRef: HotToastRef) {}
}

对应模板文件（custom-toast.component.html）：

<div [attr.data-testid]="'custom-toast'">
  {{ toastRef.message }}
  <!-- 根据dismissible配置显示关闭按钮 -->
  <button *ngIf="toastRef.config.dismissible" (click)="toastRef.close()">×</button>
</div>

autoClose配置无需额外处理，原HotToastService会根据配置自动控制关闭逻辑，只要你在服务中正确传递了配置即可。

3. 验证配置生效 #

调用自定义服务时传入配置：

this.customToastService.show('测试提示', {
  autoClose: false,
  dismissible: true,
  duration: 5000
});

这样就能保证原库的配置项在自定义组件中正常生效，同时保留你添加测试属性的需求。

内容的提问来源于stack exchange，提问作者Rumesh Wishwa