无法导入 ComponentResolver 和 ViewContainerRef答案

【问题标题】：Not able to import ComponentResolver and ViewContainerRef无法导入 ComponentResolver 和 ViewContainerRef
【发布时间】：2016-11-03 02:55:39
【问题描述】：

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

错误#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'导入{组件，组件解析器，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 版本？

【问题讨论】：

我会建议你使用新的 angular2 版本，基于候选版本 3 甚至 4。rc4 刚刚发布github.com/angular/angular/blob/master/CHANGELOG.md（很多东西与 beta 阶段有很大不同）
使用 RC3 更新，"dependencies": { "angular/http": "2.0.0-rc.1", "angular2": "2.0.0-rc.3",...仍然得到同样的错误。有什么想法吗？
您是否将导入从 angular2/xxx 更改为 @angular/xxx？
哪里需要改？你能详细说明一下吗？我在 package.json 中进行了更改。还有什么地方需要改吗？
尝试先阅读 Angular 官方教程，这样做可能会帮助您了解核心/主要差异（供参考：angular.io/docs/ts/latest/quickstart.html）

标签： angular angular2-directives

【解决方案1】：

ComponentResolver 已被弃用并删除。改用 ComponentFactoryResolver

【讨论】：