Question

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

app.moudle.ts已导入ToastrService，并且已在提供商中添加了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：./ EventListComponent类EventListComponent中的错误 - 内联模板：6：16引起：无法读取属性'extend' 未定义。原始例外：无法读取未定义的属性'extend' TypeError：无法读取未定义的属性“extend” 在米（toastr.js：411）在Object.s [成功]（toastr.js：85）在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之前加载

Answer 2

bootstrap.min.css也应该在toastr.min.js之前下注。

环境：Angular 7和bootstrap 4。

下面是angular.json的一部分，它正在工作。

   "styles": [
      "node_modules/ngf-bootstrap/dist/bootstrap.min.css",
      "node_modules/toastr/build/toastr.min.css",
      "src/styles.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.js",
      "node_modules/toastr/build/toastr.min.js"
    ]

Answer 3

对我有用的东西分别是在脚本部分的angular.json文件中的以下顺序：

`"scripts": [ 
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/toastr/build/toastr.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.js"
    ]`

Answer 4

使用toastr之前，请确保导入jquery。这是敬酒的要求。

Answer 5

打开终端 -> npm install jquery --save
转到 angular.json 文件，添加以下内容：

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/toastr/build/toastr.min.js"
]

（Angular2）无法读取toastr的undefined属性'extend'

5 个答案: