Angular2: Kann die Eigenschaft 'vcRef' von undefined nicht lesen

Question

Ich hatte Angular-cli für die anfängliche Code-Einrichtung verwendet. Ich muss Angular 2 integrieren: Toastr Bibliothek aber einige, wie ich nicht in der Lage bin zu verwenden. Es funktionierte gut, wenn ich ohne Angular-cli Format verwendet hatte. Ich bekomme folgenden Fehler. wenn ich den Toast-Code ausführe.

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) 

ich folgenden Code ausführen,

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

Vielen Dank im Voraus.

Answer 1

Nach NG2-toastr Dokumentation

Brechen Änderung Lösung für 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 dynamisch Erstellung Komponente über vcRef.createComponent verwendet und es erfordert eine ViewContainerRef Verbindung. Aber es gibt nur zwei Möglichkeiten, eine ViewContainerRef zuzugreifen:

• Sie können entweder eine Richtlinie mit ViewContainerRef auf dem Element injiziert platzieren,
• oder Sie es über eine Abfrage ViewChild erhalten.

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

So haben Sie diese Komponente in Ihrer Wurzel zu injizieren.

Hinweis: ohne die Zeile:

this.toastr.setRootViewContainerRef(vRef); 

sollte es auch funktionieren, weil NG2-toastr einen kleinen Hack hat wie:

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

root viewContainerRef zugreifen

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