属性在“ToastrModule”类型上不存在。

Question

我在角度上使用ToastrModule有问题。我安装了软件包：

npm install ngx-toastr --save
npm install @angular/animations --save

然后我在"node_modules/ngx-toastr/toastr.css"中添加了angular.json

            "styles": [
              "node_modules/ngx-toastr/toastr.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ], 

以及进口BrowserAnimationsModule和ToastrModule in app.module.ts

import { ToastrModule } from 'ngx-toastr';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
    RouterModule.forRoot(appRoutes)
  ],

在register.component.ts中

import { Component, OnInit } from '@angular/core';
import { ToastrModule } from 'ngx-toastr';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

  constructor(private toastr:ToastrModule) { }

  ngOnInit(): void {
  }
  
  onRegiterUser(){
    this.toastr.success("");
  }

}

表示错误

Error: src/app/users/register/register.component.ts:17:17 - error TS2339: Property 'success' does not exist on type 'ToastrModule'.

17     this.toastr.success("");
                   ~~~~~~~




× Failed to compile.

知道为什么不起作用吗？

Answer 1

医生清楚地说你应该注射ToastrService而不是ToastrModule https://www.npmjs.com/package/ngx-toastr

@Component({...})
export class YourComponent {
  constructor(private toastr: ToastrService) {}

  showSuccess() {
    this.toastr.success('Hello world!', 'Toastr fun!');
  }
}

Answer 2

根据文档，您应该在构造函数中注入ToastrService，因此必须更改以下内容：

constructor(private toastr: ToastrModule) {}

这方面：

constructor(private toastr: ToastrService) {}