角2:DynamicComponentLoader数据未绑定模板 [英] Angular 2: DynamicComponentLoader data not binding to template
问题描述
我现在用的DynamicComponentLoader这里详细的API angular2指南
I am using the DynamicComponentLoader as detailed here on the angular2 API Guide,
https://angular.io/docs/ts/最新/ API /核心/ DynamicComponentLoader-class.html
我安装我的code到如下所示:
I have setup my code to look like the following:
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);
}
}
我看到我的Web浏览器中的模板,不过{{项目}}没有模板绑定。
I see the template in my web browser however the {{item}} doesn't bind in the template.
林也不太清楚我要去的地方错了,任何帮助,将AP preciated。
Im not too sure where i am going wrong and any help would be appreciated.
谢谢,
推荐答案
有是与使用 loadAsRoot
的一个已知的bug。建议的解决方法是使用 loadNextToLocation
或 loadIntoLocation
。
There is a known bug related to the use of loadAsRoot
. The suggested workaround is to use loadNextToLocation
or loadIntoLocation
.
看到这个答案:<一href=\"http://stackoverflow.com/questions/34728259/bindings-not-working-in-dynamically-loaded-component/34748485#34748485\">Bindings不工作在动态加载组件
希望它可以帮助你,
蒂埃里
Hope it helps you, Thierry
这篇关于角2:DynamicComponentLoader数据未绑定模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!