Angular2 : 정의되지 않은 'vcRef'속성을 읽을 수 없습니다.

Question

초기 코드 설정에 Angular-Cli를 사용했습니다. 내가 통합해야합니다 각도 2 : Toastr 라이브러리하지만 일부는 어떻게 사용할 수 없어요. Angular-cli 형식을 사용하지 않았더라도 제대로 작동했습니다. 다음과 같은 오류가 발생합니다. 나는 토스트 코드를 실행할 때. 내가 다음 코드를 실행하고 있습니다

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!'); 
    } 
} 

각도 버전 미리 2.2.1

감사합니다. 각도 v2.2.x 변하지 용액 속보 NG2-toastr 문서

따르면

Answer 1

// 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 통해 동적으로 생성 요소를 사용

그것을 필요 a ViewContainerRef 링크. 그러나 거기에 ViewContainerRef에 액세스하는 두 가지 방법 :

• 당신이 요소에 ViewContainerRef와 주입 지침을 배치 할 수 있습니다,
• 은 또는 당신은 ViewChild 쿼리를 통해 그것을 얻을 수 있습니다. https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html

그래서 당신은 당신의 루트 구성 요소에서이 문제를 주입해야합니다.

공지 사항 : NG2 - toastr 같은 작은 해킹을 가지고 있기 때문에

가

this.toastr.setRootViewContainerRef(vRef); 

그것뿐만 아니라 작동합니다 : 선없이 루트 viewContainerRef 액세스 할 수

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

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