如何在 angular 内渲染 toastr？

Question

如何将 toastr 导入 angular 应用程序？

我正在学习 Angular Fundamentals 课程，并试图从我的 export class:[=20= 中简单地显示 toastr.success ]

handleThumbnailClick(eventName){
    toastr.success(eventName)
}

并出现以下错误：

完整的 ts 文件是：

import { Component, OnInit } from '@angular/core'
import { EventService } from './shared/event.service'

declare let toastr

@Component({
    selector: 'events-list',
    template: `<div>
                    <h1>upcoming angular components</h1>
                    <hr>
                    <div class="row">
                        <div class="col-md-5" *ngFor="let event of events">
                            <event-thumbnail (click)="handleThumbnailClick(event.name)" [event]="event"></event-thumbnail>
                        </div>
                </div>

</div>`})
export class EventsListComponent implements OnInit   {
    events:any[]
    constructor(private eventService: EventService) {
    }

    ngOnInit() {
        this.events = this.eventService.getEvents()
    }

    handleThumbnailClick(eventName){
        toastr.success(eventName)
    }
}

我已经运行安装 toastr：

npm install toastr --save

并将这些包含在 angular.json 文件中：

我做错了什么？为什么 toastr 不渲染？

Answer 1

使用这个导入语句

import * as toastr from 'toastr';

而不是

declare let toastr

还有你的angular.json，应该是这样的

        "styles": [
          "src/styles.css",
          "../node_modules/toastr/build/toastr.min.css"
        ],
        "scripts": [
          "../node_modules/toastr/build/toastr.min.js"
        ]

Answer 2

这对我有用。确保运行 :

npm i --save-dev @types/toastr
在angular.json

"styles": [
    "node_modules/toastr/build/toastr.min.css"
],
"scripts": [
    "node_modules/toastr/build/toastr.min.js"
]

使用import * as toastr from 'toastr';而不是声明let toastr

如何在 angular 内渲染 toastr？

how to render toastr within angular?

javascript

typescript

toastr

angular