Question

我已经按照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正在注册，但模态构造函数中的if (rootNav['_tabs']) { // TODO: must have until this goes in // https://github.com/angular/angular/issues/5481 void 0; return; }不是。我不知道该怎么办，因为我不是100％肯定会发生什么事？

更新

当我调试nav.present（导航控制器功能）时，我看到的是：

"ionic-angular": "^2.0.0-beta.8", 
"ionic-native": "^1.1.0"

我的项目中确实有选项卡，因此语句的计算结果为true，而当前函数有效地返回0并调用它。在我的package.json中，我的离子版本是：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; }

希望这些增加的信息有助于诊断比我更聪明的人。

更新2 ：

我已更新到2.0.0-beta.9中的最新离子2版本。但是，当我在chrome控制台中调试时，我仍然在离子角度代码的nav.present函数中看到上面的代码，即使我在自己的代码中看到它，我也看到了这一点：

<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>

我已经清除了我的缓存并且硬重新加载了页面，但仍然显示旧代码。我一定是在失去理智。对此的任何见解都会令人惊叹。

更新3

以下是我的标签的代码。 app.html中的live和index变量只是在右侧选项卡上启动应用程序的一种方式。它从1（或第二个标签）开始：

hash = {"item_number1"=>"4",
"option_name1"=>"Size: UK - 4, Color: Red", "contact_phone"=>"035-683-3582",
 "txn_id"=>"XXXXXXXXXXXXXXXX", "payment_type"=>"instant", "last_name"=>"Bye Bye",
"item_name1"=>"BLACK Dress", "receiver_email"=>"xxxx@xxxx.com", "quantity1"=>"1",·
"insurance_amount"=>"0.00"}

1.upto(Float::INFINITY).each_with_object([]) do |i, memo|
  entity = hash.select { |k, _| k =~ /\D#{i}\Z/ }
               .map { |k, v| [k[/.+(?=\d\Z|\d\d\Z)/], v] }
               .to_h
  break memo if entity.empty?
  memo << entity
end.each do |hash|
  PaymentNotification.create!(**hash)
end

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

}

你可以玩this plunker（Ionic2 beta.9）。

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

<强>更新

我已更新plunker以包含tab布局，并且按预期工作。

现场app.html ...

我试图让它工作，包括app.html中的标签，但无法做到。因此，我已在home page中添加了仅包含两个标签的标签，并在app.ts中设置了this.rootPage = HomePage;，因此这是应用程序的第一页。您是否可以尝试在自己的应用中执行此操作，以查看是否可以在问题中包含app页面中的标签？

Answer 2

在离子2 beta 11中，更新解决了这个问题。我的代码与示例here on ionic's site的唯一区别是我的模态的模板。超级简单，直截了当地完成它。

Answer 3

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

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

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

Ionic 2 Modal未显示

3 个答案: