Javascript 如何在角度范围内渲染toastr？

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

我正在学习本课程，并试图在我的

导出类中简单地显示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)
    }
}

从'@angular/core'导入{Component，OnInit}
从“./shared/event.service”导入{EventService}
声明让toastr
@组成部分({
选择器：“事件列表”，
模板：`
角组件

`})
导出类EventsListComponent实现OnInit{
事件：任何[]
构造函数（私有eventService:eventService）{
}
恩戈尼尼特（）{
this.events=this.eventService.getEvents（）
}
handleThumbnailClick（事件名称）{
toastr.success（事件名称）
}
}

我已运行此程序来安装toastr：

npm安装toastr--save

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


我做错了什么？为什么不使用toastr呈现？
使用此导入语句

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"
        ]

为了更好地工作和可用性，请使用
https://www.npmjs.com/package/angular2-toaster
这似乎没有什么区别，文本变灰了-表明它甚至没有被使用。这确实有效，请查看并更新我的答案。非常感谢，我正在尝试以下内容：请记住，尽管我是一名经验丰富的后端开发人员，我只是开始有角度，所以我可能错过了一些完全重要的东西。谷歌图片是私人的，我看不见。你能在stackblitz上用你的代码做一个项目并共享url吗？