Angular2-toaster 无法显示问题求助

尝试使用angular2-toaster但无法正常显示，相关配置如下：

按钮HTML代码 #

<button (click)="test()">Make a toast!</button>

组件TS代码 #

import {ToasterService} from 'angular2-toaster';

constructor(private router: Router,private toastr: ToasterService) { }

test() {
  this.toastr.pop('success', 'Success', 'The Joke has been added');
}

App组件HTML #

<toaster-container></toaster-container>
<router-outlet></router-outlet>

AppModule配置 #

import { ToasterModule } from 'angular2-toaster';
@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    PagesModule,
    HttpClientModule,
    NgbModule,
    CommonModule,
    BrowserAnimationsModule,
    ToasterModule.forRoot(),
  ],
  // ...其他配置
})

angular.json样式配置 #

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "node_modules/bootstrap/scss/bootstrap.scss",
  "./node_modules/angular2-toaster/toaster.css",
  "src/styles.css"
]

• 检查版本兼容性：确认angular2-toaster版本与当前Angular版本匹配，部分旧版本toaster可能不支持Angular 10+，需查看包文档确认兼容范围。
• 补充容器配置：尝试给<toaster-container>添加配置参数，在App组件中定义配置对象并绑定：

  import { ToasterConfig } from 'angular2-toaster';
  
  config: ToasterConfig = new ToasterConfig({
    positionClass: 'toast-top-right',
    timeout: 5000,
    newestOnTop: true
  });
  

  然后在HTML中绑定：

  <toaster-container [toasterconfig]="config"></toaster-container>
  

• 检查懒加载模块：如果使用了懒加载的PagesModule，需要在该模块中导入ToasterModule（无需forRoot()），确保服务能在子模块中正常注入。
• 验证样式路径：确认angular.json中的toaster.css路径正确，可尝试改为node_modules/angular2-toaster/toaster.css（与bootstrap路径格式一致），或直接复制css文件到src目录引入。
• 排查控制台错误：打开浏览器开发者工具（F12）查看Console面板，是否存在依赖缺失、注入失败或样式加载错误等提示，根据报错定位问题。
• 确认方法触发：在test()方法中添加console.log('toast triggered')，点击按钮后查看控制台是否有输出，排除按钮点击事件未绑定成功的问题。
• 检查动画模块：确保BrowserAnimationsModule已正确导入，若无需动画，可替换为NoopAnimationsModule测试是否是动画模块导致的冲突。

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