Toastr在独立组件上的Angular17实现

发布于02月22日

我一直试图将"toastr"添加到我的Angular17项目中，但将它注入到我的组件中并不起作用.我使用AngularCLI添加了它.

我收到下一个错误:

ERROR错误[NullInjectorError]:R3InjectorError nfig -InjectionToken ToastConfig]: NullInjectorError:没有InjectionToken ToastConfig的提供程序！

以下是我的代码包含的内容:

import { Component, Output, EventEmitter, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { ToastrService, ToastNoAnimation } from 'ngx-toastr';

@Component({
  selector: 'app-pdslogin',
  standalone: true,
  imports: [
    FormsModule
  ],
  providers: [
    { provide: ToastrService, useClass: ToastrService },
    { provide: ToastNoAnimation, useClass: ToastNoAnimation }
  ],
  templateUrl: './pdslogin.component.html',
  styleUrls: ['./pdslogin.component.css']
})
export class PDSLoginComponent {
  loginData = {
    UserId: ''
  };
  @Output() loginEvent = new EventEmitter();
  onLogin() {
    this.loginEvent.emit(this.loginData);
    this.toastr.info("SHOWING TOASTR!!!","Info");
  }
  constructor(private router: Router, private toastr: ToastrService) { }
}

我试着在Stack Overflow中的论坛和问题中搜索解决方案，但所有这些都是针对早期版本的Angular17，现在Angular17使用"独立"属性，所以它需要直接导入和注入到组件中.

我try 过将其作为提供者添加到我的‘main.ts’文件中，但同样不起作用.

import { AppComponent } from './src/app.component'; import { provideAnimations } from '@angular/platform-browser/animations'; import { provideToastr } from 'ngx-toastr'; bootstrapApplication(AppComponent, { providers: [ provideAnimations(), // required animations providers provideToastr(), // Toastr providers ] });

import { Component, Output, EventEmitter, Inject } from '@angular/core'; import { Router } from '@angular/router'; import { FormsModule } from '@angular/forms'; import { ToastrService, ToastNoAnimation } from 'ngx-toastr'; @Component({ selector: 'app-pdslogin', standalone: true, imports: [ FormsModule ], providers: [], templateUrl: './pdslogin.component.html', styleUrls: ['./pdslogin.component.css'] }) export class PDSLoginComponent { loginData = { UserId: '' }; @Output() loginEvent = new EventEmitter(); onLogin() { this.loginEvent.emit(this.loginData); this.toastr.info("SHOWING TOASTR!!!","Info"); } constructor(private router: Router, private toastr: ToastrService) { } }

Toastr在独立组件上的Angular17实现

推荐答案

Angular相关问答推荐

将Angular Metal的芯片组件集成到我的表单中时出错

*ngFor循环中令人困惑的Angular 行为

当我更新S显示的数据时，为什么我的垫表用户界面没有更新？

Angular 懒惰地加载一个服务

为什么Angular的ViewEncapsulation枚举有没有值为1的键？

NX如何在前端和后端使用一个接口库

Angular p-triStateCheckbox for each Select 更改不同的 colored颜色

如何有条件地更新 Angular 路由解析器数据？

Angular：组件的内容投影访问数据

Angular JWT Token 被添加到lazyUpdate 而不是 HttpHeaders 中的标头

可从 Angular2 中的

如何测试 Angular2 的 router.navigate？

来自 ngFor 项的动态 routerLink 值给出错误Got interpolation ({{}}) where expression was expected

URL 清理导致嵌入式 YouTube 视频的刷新

等待多个promises完成

Angular2 Base64 清理不安全的 URL 值

如何在 ngFor angular 2 内部使用 track

Angular 2 http 没有得到

测试一个包含 setTimeout() 的函数

Angular 应用程序必须在新部署后清除缓存