角2：DynamicComponentLoader數據未綁定模板

Question

我使用這裏詳述的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}}沒有綁定到模板中。

林不太確定我哪裏錯了，任何幫助將不勝感激。

感謝，

Answer 1

有與使用的loadAsRoot一個已知的bug。建議的解決方法是使用loadNextToLocation或loadIntoLocation。

看到這個答案：Bindings not working in dynamically loaded component

希望它可以幫助你， 蒂埃裏