[英]Angular 2: DynamicComponentLoader data not binding to template
我正在使用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}}没有绑定在模板中。
我不太确定我要去哪里错了,将不胜感激。
谢谢,
有一个与使用loadAsRoot
有关的已知错误。 建议的解决方法是使用loadNextToLocation
或loadIntoLocation
。
看到这个答案: 绑定在动态加载的组件中不起作用
希望对您有帮助,蒂埃里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.