Ionic2: invalid page component: ProjectInfoPage

Question

export class ProjectDetail {
    page: string;
}

the page info contained in json, like this:

{
    "data":[
         {
             page: "PageInfoPage"
         },
         {
             page: "PageInfoPage1"
         }         
    ]
}

I parse info from this json,then saved in Array. when execute this.nav.push(pd.page),throw exception as title described.I don't know how to convert 'string' to 'component'.

============================================================ I use the method like Angular 2 - Resolve Component Factory with a string described. This is my code:

itemClick(pd: ProjectDetail) {

        var factories = Array.from(this.resolver['_factories'].keys());
        var factoryClass = <Type<any>>factories.find((x: any) => x.name === pd.page);
        const factory = this.resolver.resolveComponentFactory(factoryClass);
        const compRef = this.vcRef.createComponent(factory);

        if (this.componentRef) {
            this.componentRef.destroy();
        }

        this.componentRef = compRef;

        this.nav.push(compRef, {
            item: pd,
            pid: this.project.pid
        });
    }

it still does not work.Thank you for your answer.

At last,I solved it with a stupid method.As I create a map like this:

componentRegistry = {
        'ProjectInfoPage': ProjectInfoPage
    };

And then push like this:

this.nav.push(this.componentRegistry[pd.page], {
            item: pd,
            pid: this.project.pid
        });

Answer 1

Normally, you have to import the actual component class for the page that you want to navigate to and then push that class onto the stack. By default, there is no way built into ionic2 to navigate via string references. I had the same problem today where I wanted to be able to navigate using strings rather than pushing the component class on the stack.

Check out the following link from the ionic forums on how to accomplish this. Look at the last two responses to the thread, which include how to solve this problem from beta stages and then an updated answer for how to do so with ionic 2.2.0. Although I'm pretty sure the same solution will work for all versions of ionic 2 since final release.

https://forum.ionicframework.com/t/ionic2-navigation-circular-depencies/41123/5