Ionic2:无效页面组件:ProjectInfoPage

时间:2017-03-12 13:54:07

标签: ionic2 components nav

export class ProjectDetail {
    page: string;
}

json中包含的页面信息,如下所示:

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

我从这个json解析信息,然后保存在Array中。 执行this.nav.push(pd.page)时,将异常作为标题描述。我不知道如何转换' string'到'组件'。

=============================================== ============= 我使用像Angular 2 - Resolve Component Factory with a string这样的方法。这是我的代码:

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

它仍然不起作用。谢谢你的回答。

最后,我用一种愚蠢的方法解决了它。当我创建这样的地图时:

componentRegistry = {
        'ProjectInfoPage': ProjectInfoPage
    };

然后推这样:

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

1 个答案:

答案 0 :(得分:0)

通常,您必须导入要导航到的页面的实际组件类,然后将该类推送到堆栈中。默认情况下,ionic2无法通过字符串引用进行导航。我今天遇到了同样的问题,我希望能够使用字符串导航而不是在堆栈上推送组件类。

从离子论坛查看以下链接,了解如何完成此操作。查看该线程的最后两个响应,其中包括如何从beta阶段解决此问题,然后更新如何使用ionic 2.2.0解决此问题。虽然我非常确定相同的解决方案适用于自最终版本以来所有版本的离子2。

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