Angular 2: DynamicComponentLoader data not template bound

Question

I am using DynamicComponentLoader as described here in the angular2 API manual,

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

I set my code so that it looks like this:

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); } } 

I see the template in my web browser, however {{item}} is not linked in the template.

I am not too sure where I am going wrong and any help would be appreciated.

Thanks,

Answer 1

Known error related to the use of loadAsRoot . The suggested solution is to use loadNextToLocation or loadIntoLocation .

See this answer: Bindings not working in dynamically loaded component

Hope this helps you, Thierry