离子2莫代尔没有显示

Question

我已经按照Ionic2模态给出的示例而没有得到任何错误但是当我点击应该启动模态的卡时没有任何反应.

这是模态本身的代码:

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

将console.log在presentModal正在注册,但人在情态的构造函数是没有的.我不知道该怎么办,因为我不是百分之百确定会发生什么事吗？

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", "ionic-native": "^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>

Answer 1

我对处理选项卡的代码一无所知,但是我在这篇文章中创建了一个带有代码的Plunker(并且进行了很小的改动),并且模态显示正确.

我所做的改变是在模态代码中:

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

}

你可以玩这个plunker(Ionic2 beta.9).

====================================

更新:

我已经更新了plunker以包含一个tab布局,它按预期工作.

现在在app.html ...

我试图让它工作,包括标签,app.html但无法做到.所以,我在一个home page只包含两个标签的标签中添加了标签,并且在app.ts我刚设置的标签中,this.rootPage = HomePage;这是应用程序的第一页.您是否可以尝试在您的应用中执行此操作,以查看是否app可以在页面中包含选项卡？

Answer 2

在 ionic 2 beta 11 中，更新修复了该问题。我的代码与ionic 网站上的示例的唯一区别是我的模式的模板。超级简单，而且操作方法也很直接。