这是模态本身的代码:
@Component ({ template: ` <ion-card class='popover'> <ion-card-content> Hello </ion-card-content> </ion-card> ` }) export class AccModal { dumbData: number; constructor() { console.log("constructor"); this.dumbData= 22; } }
我的模态将呈现的页面如下所示:
<ion-card (click)='presentModal()' class='custom-card'> <ion-card-header> Sched. Accuracy </ion-card-header> <ion-card-content> 71% </ion-card-content> </ion-card>
使用这样的打字稿:
presentModal() { let myModal = Modal.create(AccModal,{param: "something"}); console.log('myModal is ',myModal); this.nav.present(myModal); console.log("function being called"); }
presentModal中的console.log正在注册,但模态的构造函数中的那个是NOT.我不知道该怎么办,因为我不是100%肯定会发生什么事?
UPDATE
当我调试到nav.present(导航控制器功能)时,我看到的是:
if (rootNav['_tabs']) { // TODO: must have until this goes in // https://github.com/angular/angular/issues/5481 void 0; return; }
我的项目确实有选项卡,因此语句的计算结果为true,而当前函数有效地返回0并调用它.在我的package.json中,我的离子版本是:“ionic-angular”:“^ 2.0.0-beta.8”,
“离子原生”:“^ 1.1.0”
希望这些增加的信息有助于诊断比我自己更聪明的人.
更新2:
我已经更新到2.0.0-beta.9中最新的离子2版本.但是,当我在chrome控制台中调试时,我仍然在离子角度代码中的nav.present函数中看到上面的代码,即使我在自己的代码中看到它,我也看到了:
if (rootNav['_tabs']) { // TODO: must have until this goes in // https://github.com/angular/angular/issues/5481 console.error('A parent <ion-nav> is required for ActionSheet/Alert/Modal/Loading'); return; }
我已经清除了我的缓存并且硬重新加载了页面,但仍然显示旧代码.我一定是在失去理智.对此的任何见解都会令人惊叹.
更新3
这是我的标签的代码. app.html中的live和index变量只是在右侧选项卡上启动应用程序的一种方式.它从1开始(或第二个标签):
<ion-tabs greenTheme [selectedIndex]="index"> <ion-tab tabIcon="people" #content tabTitle="My Roster" [root]="tab2"></ion-tab> <ion-tab tabIcon="stats" #content tabTitle="Wage Overview" [root]="tab1"></ion-tab> </ion-tabs>
我所做的改变是在模态代码中:
// Add NavParams to use it later in the modal's constructor import { ...,NavParams } from 'ionic-angular'; @Component ({ template: ` <ion-card class='popover'> <ion-card-content> Hello </ion-card-content> </ion-card> ` }) export class AccModal { private dumbData: number; // I've added the params variable,because you're calling this constructor // with a parameter (called 'param' and with the 'something' value) constructor(private params: NavParams) { console.log("constructor"); this.dumbData= 22; // You can see in the console the parameter being printed properly console.log('Param:',params.get('param')); } }
你可以玩this plunker(Ionic2 beta.9).
====================================
更新:
我已经更新了plunker以包含选项卡布局,并且它按预期工作.
The live in the app.html…
我试图让它工作,包括app.html中的选项卡,但无法做到.所以,我在一个只包含两个标签的主页中添加了标签,在app.ts中我只设置了this.rootPage = HomePage;这是应用程序的第一页.您可以尝试在您的应用中执行此操作,以查看是否可以将应用页面中的标签包含在问题中?