How to properly dynamically load Components into Pages

@gentunian wrote:

Hi there,

I've found that when loading components dynamically into pages the style breaks. What could I be doing wrong?

Consider this code extension from the tutorial:

test.page.js:

import {DynamicComponentLoader, Component} from 'angular2/core';

import {Page} from 'ionic-angular';

@Component({
    template: '<ion-list><ion-item>item 1</ion-item><ion-item>item 2</ion-item></ion-list>'
})
export class TestComponent{
    constructor() {}
}

@Page({
    templateUrl: 'build/pages/test/test-page.template.html'
})
export class TestPage {
    static get parameters() {
        return [[DynamicComponentLoader]];
    }

    constructor(dcl) {
        dcl.loadAsRoot(TestComponent, 'test');
    }
}

test-page.template.html

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Test Page</ion-title>
</ion-navbar>


<ion-content padding>
    <test></test>
</ion-content>

Then I've modify hello-ionic.html button:

<button primary (click)="loadTestPage()">Toggle Menu</button>

and hello-ionic.js for invocation:

// hello-ionic.js code
import {TestPage} from '../test/test.page';
// more hello-ionic.js code here
    loadTestPage() {
        this.nav.push(TestPage);
    }

The result is a non styled item list:

Screenshot_2016-04-16_16-18-33.png745x229 6.09 KB

How should I properly load components into pages in order to maintain ionic 2 styles?

Best,

Posts: 5

Participants: 2

Read full topic