7

我已经按照Ionic2 modals上给出的示例进行操作，并且没有收到任何错误，但是当我单击应该启动模态的卡片时，什么也没有发生。

这是模态本身的代码：

@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注册，但模态构造函数中的那个不是。我不知道该怎么做，因为我不是 100% 确定发生了什么？

更新

当我调试到 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 中的最新 ionic 2 版本。但是，当我在 chrome 控制台中进行调试时，我仍然在 ionic-angular 代码中的 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>
4

3 回答 3

5

我对处理选项卡的代码一无所知，但我用这篇文章中的代码创建了一个 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页面中的选项卡可以解决问题？

于 2016-06-28T10:01:16.877 回答
1

在 ionic 2 beta 11 中，更新修复了该问题。我的代码与ionic 网站上的示例的唯一区别是我的模态模板。超级简单，并且直接说明它是如何完成的。

于 2016-08-15T19:39:26.523 回答
-1

在构造函数中导入 NavController，如下所示：

constructor(private navController: NavController) {
  // Whatever goes here
}

而你的方法调用this.navController.present(myModal);

于 2016-06-25T15:24:33.703 回答