Ionic新建页面及页面跳转

最近在进行Ionic项目的学习,接下来稍稍总结一下新建页面以及页面跳转的内容。

一、创建页面:

使用命令:ionic g page Ranking

该命令执行完之后,pages文件夹下就会有ranking文件夹,其下包含ranking.html、ranking.module.ts、ranking.scss、ranking.ts (里面定义了我们后面需要的RankingPage类)。


二、页面跳转:

1、进行事件绑定,假如在页面mine的按钮上进行click事件绑定,单击按钮跳转到我们新建的Ranking页面,则:

(click)="goRanking()";


2、在mine.ts中导入RankingPage:

import { RankingPage } from '../ranking/ranking' ;


3、在mine.ts中写goRanking()的方法:

goRanking() {

    this.navCtrl.push(RankingPage);

}


4、找到app.module.ts ,导入RankingPage:

import { RankingPage } from ' ../pages/ranking/ranking ' ;


5、在app.module.ts中找到declarations 、 entryComponents ,在里面都添加上RankingPage 。



猜你喜欢

转载自blog.csdn.net/luyanc/article/details/80387889