Angular 2：DynamicComponentLoader 数据未绑定到模板答案

【问题标题】：Angular 2: DynamicComponentLoader data not binding to templateAngular 2：DynamicComponentLoader 数据未绑定到模板
【发布时间】：2016-05-03 05:37:37
【问题描述】：

我正在使用 angular2 API 指南中详述的 DynamicComponentLoader，

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

我的代码如下所示：

import {Page} from 'ionic-framework/ionic';
import { Component, View, DynamicComponentLoader, Injector } from 'angular2/core';
import { RouteParams } from 'angular2/router';

import { DataService } from '../../services/dataService';
import { Section } from '../../models/section';

@Component ({
    selector : 'itemView',
    template : '<div id="content"></div>'
})

export class ItemView {
    constructor (private dataService : DataService, private _routeParams : RouteParams, dcl: DynamicComponentLoader, injector: Injector) {
        var sectionid = this._routeParams.get ('sectionid');
        var categoryid = this._routeParams.get ('categoryid');
        var itemid = this._routeParams.get ('itemid');

        var views = {product: ItemproductView, dispensor: ItemdispensorView, signage: ItemsignageView, equipment: ItemequipmentView};

        if (categoryid !== null) {
            this.item = dataService.getCategoryItem (sectionid, categoryid, itemid);
        } else {
            this.item = dataService.getItem (sectionid, itemid);
        }

        dcl.loadAsRoot(views[sectionid], '#content', injector);
    }
}



/* ****************** */
//   DYNAMIC VIEWS    //
/* ****************** */


@Component ({
    selector : 'itemproductView',
    templateUrl : 'build/components/item/item-product.html'
})
export class ItemproductView {
    constructor(private dataService : DataService, private _routeParams : RouteParams) {
        var sectionid = this._routeParams.get ('sectionid');
        var categoryid = this._routeParams.get ('categoryid');
        var itemid = this._routeParams.get ('itemid');

        this.item = dataService.getCategoryItem (sectionid, categoryid, itemid);
    }
}

@Component ({
    selector : 'itemdispensorView',
    templateUrl : 'build/components/item/item-dispensor.html'
})
export class ItemdispensorView {
    constructor(private dataService : DataService, private _routeParams : RouteParams) {
        var sectionid = this._routeParams.get ('sectionid');
        var itemid = this._routeParams.get ('itemid');

        this.item = dataService.getItem (sectionid, itemid);
    }
}

@Component ({
    selector : 'itemsignageView',
    templateUrl : 'build/components/item/item-signage.html'
})
export class ItemsignageView {
    constructor(private dataService : DataService, private _routeParams : RouteParams) {
        var sectionid = this._routeParams.get ('sectionid');
        var itemid = this._routeParams.get ('itemid');

        this.item = dataService.getItem (sectionid, itemid);
    }
}

@Component ({
    selector : 'itemequipmentView',
    templateUrl : 'build/components/item/item-equipment.html'
})
export class ItemequipmentView {
    constructor(private dataService : DataService, private _routeParams : RouteParams) {
        var sectionid = this._routeParams.get ('sectionid');
        var itemid = this._routeParams.get ('itemid');

        this.item = dataService.getItem (sectionid, itemid);
    }
}

我在网络浏览器中看到了模板，但是 {{item}} 没有绑定到模板中。

我不太确定我哪里出错了，我们将不胜感激。

谢谢，

【问题讨论】：

标签： typescript angular ionic2

【解决方案1】：

有一个与使用loadAsRoot 相关的已知错误。建议的解决方法是使用loadNextToLocation 或loadIntoLocation。

看到这个答案：Bindings not working in dynamically loaded component

希望对你有帮助蒂埃里

【讨论】：

非常感谢，辛苦了。浏览了 SO 并没有找到他的问题。