javascript - (Angular2) 无法读取 toastr 未定义的属性 'extend'

Question

我正在尝试在 angularjs 2 中使用 toastr 作为服务，它将如下所述注入(inject)到我的组件中。当调用 handleEvent 函数时，我收到“无法读取未定义的属性‘扩展’”。非常感谢对错误的任何建议和/或解释。

app.moudle.ts 导入了 ToastrService 并在 providers 中添加了 ToastrService。

//events/events-list.components.ts

import { ToastrService } from '../common/toastr.service';
@Component ({
    selector: 'event-list',
    template: `
    <div>
        <h1> Upcoming Angular 2 Event </h1>
        <hr>
        <div class="row">
            <div *ngFor="let event_data of all_data" class="col-md-5">
                <event-thumbnail (click)="handleEvent(event_data.name)" [event]="event_data"></event-thumbnail>
    </div>  
            </div>
        </div>
    `
})

export class EventListComponent implements OnInit {
  all_data:any[]
  constructor(private eventService : EventService , private toastr : ToastrService ){
    //moved code from here to ngOnInit 
  }

  ngOnInit(){
    this.all_data = this.eventService.getEvents();
  }

  handleEvent(eventName) {
    console.log("hey here  "+eventName);
    this.toastr.success(eventName);
  }
}

错误:
[ console.log 输出后抛出此错误]

EXCEPTION: Error in ./EventListComponent class EventListComponent - inline template:6:16 caused by: Cannot read property 'extend' of undefined. ORIGINAL EXCEPTION: Cannot read property 'extend' of undefined
TypeError: Cannot read property 'extend' of undefined at m (toastr.js:411) at Object.s [as success] (toastr.js:85) at ToastrService.success (toastr.service.ts:12)

Answer 1

添加这个 script src="node_modules/toastr/build/toastr.min.js"

在此之后 script src="node_modules/jquery/dist/jquery.min.js"></script>

原因:toastr.js使用 jQuery , 所以 jQuery应该在 toastr.js 之前加载