[英]Angular2 : Cannot read property 'vcRef' of undefined
I had used Angular-cli for the initial code setup. 我已经使用Angular-cli进行了初始代码设置。 I need to integrate Angular 2: Toastr library but some how i'm not able to use.
我需要集成Angular 2:Toastr库,但需要一些我无法使用的库。 It was working fine when i had used without Angular-cli format.
当我不使用Angular-cli格式时,它运行良好。 I'm getting following error.
我遇到以下错误。 when i execute the toast code.
当我执行敬酒代码。
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)
I'm executing following code, 我正在执行以下代码,
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 version 2.2.1 Angular版本2.2.1
Thanks in advance. 提前致谢。
According to ng2-toastr documentation 根据ng2-toastr文档
Breaking change solution for Angular v2.2.x Angular v2.2.x的重大更改解决方案
// AppComponent.ts (Root component of your app)
constructor(public toastr: ToastsManager, vRef: ViewContainerRef) {
this.toastr.setRootViewContainerRef(vRef);
}
https://github.com/PointInside/ng2-toastr#breaking-change-solution-for-angular-v22x https://github.com/PointInside/ng2-toastr#breaking-change-solution-for-angular-v22x
ng2-toastr uses dynamically creation component via vcRef.createComponent and it requires a ViewContainerRef
link. ng2-toastr通过vcRef.createComponent使用动态创建组件,它需要一个
ViewContainerRef
链接。 But there are only two ways to access a ViewContainerRef
: 但是只有两种方法可以访问
ViewContainerRef
:
https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html
So you have to inject this in your root component. 因此,您必须将其注入到您的根组件中。
Notice : without the line: 注意 :没有一行:
this.toastr.setRootViewContainerRef(vRef);
it should work as well because ng2-toastr has a small hack like: 它应该也能正常工作,因为ng2-toastr有一个小技巧,例如:
if (!this._rootViewContainerRef) {
this._rootViewContainerRef = this.appRef['_rootComponents'][0]['_hostElement'].vcRef;
}
to access root viewContainerRef 访问根viewContainerRef
https://github.com/PointInside/ng2-toastr/blob/72a35d01fa4a7c67395b3ada5c74124b1701697f/src/toast-manager.ts#L46-L48 https://github.com/PointInside/ng2-toastr/blob/72a35d01fa4a7c67395b3ada5c74124b1701697f/src/toast-manager.ts#L46-L48
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.