我遵循了 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>
使用这样的 typescript :
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
正在注册,但模态构造函数中的那个不是。我不知道该怎么做,因为我不能 100% 确定发生了什么?
更新
当我调试到 nav.present(导航 Controller 功能)时,我看到的是:
if (rootNav['_tabs']) {
// TODO: must have until this goes in
// https://github.com/angular/angular/issues/5481
void 0;
return;
}
我的项目中确实有选项卡,因此该语句的计算结果为 true,并且 present 函数有效地返回 0 并称其为好。在我的 package.json 中,我的 ionic 版本是:"ionic-angular": "^2.0.0-beta.8",
“ ionic native ”:“^1.1.0”
希望这些添加的信息有助于诊断比我更聪明的人。
更新 2:
我已经更新到最新的 ionic 2 版本 2.0.0-beta.9。但是,当我在 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>
最佳答案
我对处理选项卡的代码一无所知,但我使用这篇文章中的代码创建了一个 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
布局,它按预期工作。
The live in the app.html...
我试图让它工作,包括 app.html
中的选项卡,但无法做到。所以,我在 home page
中添加了选项卡,它只包含两个选项卡,而在 app.ts
中,我只是设置了 this.rootPage = HomePage;
所以这是应用程序的第一页。您能否尝试在您的应用中执行此操作,看看在 app
页面中包含选项卡是否可以解决问题?
关于angular - Ionic 2 Modal 未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38018293/