无法导入ComponentResolver和ViewContainerRef

时间:2016-06-30 20:37:12

标签: angular angular2-directives

我正在尝试根据父组件中的某些事件动态加载子组件。我在Import语句和ViewChild语句中遇到了一些编译错误。以下是errors

错误#1

import { Component, ComponentResolver, ViewContainerRef, ViewChild, } from 'angular2/core';
Error: Module "...node_modules/angular2/core" has no exported member ComponentResolver

错误#2

@ViewChild("childContainer", { read: ViewContainerRef }) childContainer: ViewContainerRef;
Error: Supplied parameters do not  match any signature of call target

错误#3

this._cr.resolveComponent(ExtractorDetails).then(cmpFactory => {
    let cmpRef = this.childContainer.createComponent(cmpFactory);
    cmpRef.instance.QueueID = this.queueID;
});
Error: Property createComponent does not exist on type 'ViewContainerRef'

我的package.json文件如下:

{
  "name": "ASP.NET",
  "version": "0.0.0",
  "dependencies": {
    "angular/http": "2.0.0-rc.1",
    "angular2": "2.0.0-beta.17",
    "bootstrap": "^3.3.5",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "jquery": "^2.2.4",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.22",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "gulp": "3.8.11",
    "gulp-concat": "2.5.2",
    "gulp-cssmin": "0.1.7",
    "gulp-uglify": "1.2.0",
    "rimraf": "2.2.8"
  }
}

我的父组件如下所示     从'angular2 / core'导入{Component,ComponentResolver,ViewContainerRef,ViewChild,};     从'./ExtractorDetails'导入{ExtractorDetails};     ..

@Component({
    selector: 'kendo-grid',
    templateUrl: './HTML/Admin/KendoGrid.html',
    providers: [Configuration, Constants],
    directives: [Grid]
})
export class ExtractorGrid {
    options: any;
    rowObject: any;
    extractorDetails: any;
    public component: any;
    queueID: number;

    @ViewChild("childContainer", { read: ViewContainerRef }) childContainer: ViewContainerRef;

    constructor(private configSetttings: Configuration, private constants: Constants, private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {
        this.setUpGridOptions();
    }

    onChange(event) {
        this.rowObject = event.target;

        this._cr.resolveComponent(ExtractorDetails).then(cmpFactory => {
            let cmpRef = this.childContainer.createComponent(cmpFactory);
            cmpRef.instance.QueueID = this.queueID;
        });
    }

    ....

}

如果我需要使用ComponentResolver和ViewContainerRef,有人能指出我需要引用哪个angular2版本吗?

1 个答案:

答案 0 :(得分:0)

不推荐使用ComponentResolver并将其删除。请改用ComponentFactoryResolver