javascript - Angular 2 : Cannot read property 'vcRef' of undefined

Question

我使用 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)

我正在执行以下代码，

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 版本 2.2.1

提前致谢。

Answer 1

根据 ng2-toastr 文档

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

ng2-toastr 通过 vcRef.createComponent 使用动态创建组件，它需要一个 ViewContainerRef 链接。但是只有两种方法可以访问 ViewContainerRef:

• 您可以在元素上放置一个注入(inject)了 ViewContainerRef 的指令，
• 或者您通过 ViewChild 查询获取它。

https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html

所以你必须在你的根组件中注入(inject)它。

注意:没有线:

this.toastr.setRootViewContainerRef(vRef);

它应该也能正常工作，因为 ng2-toastr 有一个像这样的小技巧:

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

访问根viewContainerRef

https://github.com/PointInside/ng2-toastr/blob/72a35d01fa4a7c67395b3ada5c74124b1701697f/src/toast-manager.ts#L46-L48