Javascript Angular2:无法读取属性'；vcRef'；未定义的_Javascript_Angular

Javascript Angular2:无法读取属性'；vcRef'；未定义的

javascript angular

Javascript Angular2:无法读取属性'；vcRef'；未定义的,javascript,angular,Javascript,Angular,我使用Angular cli进行初始代码设置。我需要集成Angular 2:Toastr库，但有些我无法使用。当我没有使用Angular cli格式时，它工作得很好。我有以下错误。当我执行toast代码时 error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'vcRef' of undefined TypeError: Cannot read property 'vcRef'

我使用Angular cli进行初始代码设置。我需要集成Angular 2:Toastr库，但有些我无法使用。当我没有使用Angular cli格式时，它工作得很好。我有以下错误。当我执行toast代码时

error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'vcRef' of undefined
TypeError: Cannot read property 'vcRef' of undefined
at http://localhost:4200/main.bundle.js:42306:101
at new ZoneAwarePromise (http://localhost:4200/main.bundle.js:63592:29)
at ToastsManager.show (http://localhost:4200/main.bundle.js:42297:16)
at ToastsManager.success (http://localhost:4200/main.bundle.js:42395:21)
at AppComponent.showSuccess (http://localhost:4200/main.bundle.js:41105:21)
at CompiledTemplate.proxyViewClass.View_AppComponent0.handleEvent_0 (/AppModule/AppComponent/component.ngfactory.js:34:34)
at CompiledTemplate.proxyViewClass.<anonymous> (http://localhost:4200/main.bundle.js:52326:37)
at HTMLButtonElement.<anonymous> (http://localhost:4200/main.bundle.js:27715:36)
at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:63339:35)
at Object.onInvokeTask (http://localhost:4200/main.bundle.js:25786:37)

error\u handler.js:47异常：未捕获（承诺中）：TypeError:无法读取未定义的
TypeError:无法读取未定义的属性“vcRef”
在http://localhost:4200/main.bundle.js:42306:101
在新的分区(http://localhost:4200/main.bundle.js:63592:29)
在Toastmanager.show上(http://localhost:4200/main.bundle.js:42297:16)
在Toastmanager.success(http://localhost:4200/main.bundle.js:42395:21)
在AppComponent.showSuccess上(http://localhost:4200/main.bundle.js:41105:21)
在CompiledTemplate.proxyViewClass.View_AppComponent0.handleEvent_0（/AppModule/AppComponent/component.ngfactory.js:34:34）
在CompiledTemplate.proxyViewClass上。(http://localhost:4200/main.bundle.js:52326:37)
在HTMLButtoneElement。(http://localhost:4200/main.bundle.js:27715:36)
在ZoneDelegate.invokeTask(http://localhost:4200/main.bundle.js:63339:35)
在Object.onInvokeTask(http://localhost:4200/main.bundle.js:25786:37)

我正在执行以下代码

import {Component} from "@angular/core";
import { ToastsManager } from 'ng2-toastr/ng2-toastr';

@Component({
  selector: 'app-root',
  template: '<button class="btn btn-default" (click)="showSuccess()">Toastr Tester</button>'
})
export class AppComponent {

  constructor(public toastr: ToastsManager) {
  }

  showSuccess() {
    this.toastr.success('You are awesome!', 'Success!');
  }
}

从“@angular/core”导入{Component}；
从“ng2 toastr/ng2 toastr”导入{toastmanager}；
@组成部分({
选择器：'应用程序根'，
模板：“Toastr测试器”
})
导出类AppComponent{
构造函数（公共toastr:ToastsManager）{
}
showSuccess（）{
这就是成功（“你太棒了！”，“成功！”）；
}
}

角度版本2.2.1

提前感谢。

根据ng2 Toasrt文档

角度v2.2.x的断裂变化解决方案

// AppComponent.ts (Root component of your app)

constructor(public toastr: ToastsManager, vRef: ViewContainerRef) {
  this.toastr.setRootViewContainerRef(vRef);
}

ng2 toastr通过vcRef.createComponent使用动态创建组件，它需要一个

ViewContainerRef

链接。但是只有两种方法可以访问

ViewContainerRef

：

您可以在元素上放置注入ViewContainerRef的指令
或者通过ViewChild查询获取

因此，必须将其注入到根组件中

注意：不包括该行：

this.toastr.setRootViewContainerRef(vRef);

它应该也能工作，因为ng2 toastr有一个小技巧，比如：

if (!this._rootViewContainerRef) {
  this._rootViewContainerRef = this.appRef['_rootComponents'][0]['_hostElement'].vcRef;
}

要访问根viewContainerRef

根据ng2 toastr文件