\ Ionic2基础学习之List
Ionic2基础学习之List
全栈工程师
这位童鞋很懒，什么也没有留下～～！
作者的热门手记
Ionci2组件之List
The List is a widely used interface element in almost any mobile app, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
Both the list, which contains items, and the list items themselves can be any HTML element.
Using the List and Item components make it easy to support various interaction modes such as swipe to edit, drag to reorder, and removing items.
List组件被广泛的用于app，可以包含文字，按钮，滑块,图标和图片。
List和List中的item都是HTML元素。
使用List和Item组件可以非常方便的支持诸如滑动编辑，拖动排序，或者移除之类的交互操作。
ion-list包含以下几种类型：
Basic Lists
Inset List
List Dividers
List Headers
Avatar List
Multi-line List
Sliding List
Thumbnail List
接下来就分别演示有何区别
Basic List
顾名思义，就是最基础的应用，在ion-list中嵌套ion-item来使用
先做一些基础准备：
在后台定义一个仓库类
export class WareHouse{
constructor(id:number,name:string,desc:string,img:string){
this.name =
this.desc =
然后模拟通过api获取到了一个WareHouse类型的数组
wareHouseList:WareHouse[]=[
new WareHouse(1,'上海仓','徐汇仓库','img/1.jpg'),
new WareHouse(2,'北京仓','一环仓库','img/2.jpg'),
new WareHouse(3,'北京二仓','二环仓库','img/3.jpg'),
new WareHouse(4,'北京三仓','三环仓库','img/4.jpg'),
new WareHouse(5,'广州仓','小蛮腰','img/5.jpg'),
new WareHouse(6,'杭州仓','西湖美景','img/6.jpg'),
new WareHouse(7,'苏州仓','楼外楼','img/7.jpg'),
new WareHouse(8,'扬州仓','汤包','img/8.jpg'),
new WareHouse(9,'上海二仓','闵行仓库','img/9.jpeg'),
new WareHouse(10,'上海三仓','浦东仓库','img/10.jpg')
接下来在前台通过angular2来把这个数组上的数据循环绑定到ion-list上
&ion-list&
&ion-item *ngFor="let wh of wareHouseList" (click)="itemClick($event,wh)"&
{{wh.name}}
&/ion-item&
&/ion-list&
点击item时触发的click事件：
itemClick(event,item:WareHouse):void{
alert(item.name);
注意：上述代码的循环绑定如*ngFor和(click)使用的是ng2的语法，强类型使用的是typescript的语法
可以看到，每个List Item之间都是有一根线划分开的，可以为ion-list增加一个no-lines属性来移除这些分割线。
&ion-list no-lines&
&ion-item *ngFor="let wh of wareHouseList" (click)="itemClick($event,wh)"&
{{wh.name}}
&/ion-item&
&/ion-list&
这样就移除了分割线
Inset List
List本来是没有外边距的，可以通过为List增加inset属性来为List增加外边距
&ion-list inset&
&ion-item *ngFor="let wh of wareHouseList" (click)="itemClick($event,wh)"&
{{wh.name}}
&/ion-item&
&/ion-list&
可以很明显的看出现在list和上面的title有了margin
List Dividers
当希望把Item分组时，可以使用&ion-item-group&来替代&ion-list&,使用&ion-item-divider&组件来作为分组的组名
&ion-item-group&
&ion-item-divider color="light"&A&/ion-item-divider&
&ion-item&Angola&/ion-item&
&ion-item&Argentina&/ion-item&
&ion-item&Australia&/ion-item&
&ion-item-divider color="light"&B&/ion-item-divider&
&ion-item&Bangladesh&/ion-item&
&ion-item&Belarus&/ion-item&
&ion-item&Belgium&/ion-item&
&/ion-item-group&
其实希望实现的效果是A和B是有灰色背景的
但是实际上直接生成的是没有的（至少在chrome是如此），因为ionic框架生成出来的代码如下：
&ion-item-divider class="item item-md item-md-light" color="light" ng-reflect-color="light"&
其中item-md是有background-color属性的，设置为了#fff也就是白色，同时它的优先级比item-md-light，因此就没有显示出来灰色的背景色
这个还要再研究下。
List Headers
每个list都可以有个header在顶部
&ion-list&
&ion-list-header&WareHouse&/ion-list-header&
&ion-item *ngFor="let wh of wareHouseList" (click)="itemClick($event,wh)"&
{{wh.name}}
&/ion-item&
&/ion-list&
可以为item增加图标来吸引眼球，图标的位置由item-left和item-right来控制，图标默认为大小为“小”，也可以通过为图标增加large属性来将图标变大
&ion-list&
&ion-item&
&ion-icon name="leaf" item-left&&/ion-icon&
&/ion-item&
&ion-item&
&ion-icon name="rose" item-right&&/ion-icon&
item-right
&/ion-item&
&ion-item&
&ion-icon name="rose" item-right large&large&/ion-icon&
&/ion-item&
&/ion-list&
Avatar List/Multi-line List/Thumbnail List
这三种都是多行的，区别无非就是昨天是个小图／没有图／和大图
&ion-list no-lines&
&ion-item *ngFor="let wh of wareHouseList"&
&ion-avatar item-left&
&img src={{wh.img}}&
&/ion-avatar&
&h2&{{wh.name}}&/h2&
&p&{{wh.desc}}&/p&
&/ion-item&
&/ion-list&
Thumbnail list就是把ion-avatar换成ion-thumbnail
Sliding List
顾名思义就是list中的item可以向左或向右滑动来出现隐藏的按钮。
想实现这个效果，需要首先在&ion-list&内部嵌套ion-item-sliding这个组件，同时在每个&ion-item&下面增加&ion-item-options&组件，
直接看示例：
&ion-list&
&ion-item-sliding&
&ion-item&
&ion-avatar item-left&
&img src="img/1.jpg"&
&/ion-avatar&
&h2&Slimer&/h2&
&/ion-item&
&ion-item-options side="left"&
&button ion-button color="primary"&
&ion-icon name="text"&&/ion-icon&
&button ion-button color="secondary"&
&ion-icon name="call"&&/ion-icon&
&/ion-item-options&
&ion-item-options side="right"&
&button ion-button color="primary"&
&ion-icon name="mail"&&/ion-icon&
&/ion-item-options&
&/ion-item-sliding&
&/ion-list&
这样就实现了从左向右滑时出现“Text”和“Call”，从右向左滑时出现“Email”
safari不能上传图片，图文版见
相关标签：
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Copyright (C)
All Rights Reserved | 京ICP备 号-2\ Ionic2学习基础之Loading组件及Login页面
Ionic2学习基础之Loading组件及Login页面
全栈工程师
这位童鞋很懒，什么也没有留下～～！
作者的热门手记
已经学了Tabs,Tab,Button,Input,组件，现在就可以做一个简单的Login页面了
新增一个Tab页
新增一个tab页需要做以下几步操作：
增加&ion-tab&&/ion-tab&标签
&ion-tab [root]="tabLogin" tabTitle="Login" tabIcon="person" &&/ion-tab&
在pages文件夹下分别增加login.html,login.ts和login.scss三个文件
在login.ts页面中写入以下代码:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector:'login-page',
templateUrl:'login.html'
export class LoginPage {
constructor(public NavCtrl:NavController){
4. 在app/app.module.ts中做以下修改
先在头部引入login
``` typescript
import { LoginPage } from '../pages/login/login';
在declarations中增加LoginPage,同时在entryComponents中增加entryComponents
在tabs.ts中做以下修改:
在头部导入login
import { LoginPage } from '../login/login';
在TabsPage中增加：
tabLogin:any = LoginP
现在login这个tab页就增加好了
login的前台页面
代码如下：
&ion-header&
&ion-navbar&
&ion-title&Login In Page&/ion-title&
&/ion-navbar&
&/ion-header&
&ion-content padding&
&ion-list&
&ion-item&
&ion-label floating color="danger"&UserName&/ion-label&
&ion-input type="text" [(ngModel)]="userInfo.UserName" clearInput&&/ion-input&
&/ion-item&
&ion-item&
&ion-label floating color="danger"&Password&/ion-label&
&ion-input type="password" [(ngModel)]="userInfo.PassWord" clearInput&&/ion-input&
&/ion-item&
&ion-item&
&button ion-button color="danger" (click)="btnClick()" block&Login&/button&
&/ion-item&
&/ion-list&
&/ion-content&
上述代码中的(click)和[(ngModel)]均为angular2的使用方式。
login页面的后台代码
代码如下：
import { Component } from '@angular/core';
import { NavController,LoadingController } from 'ionic-angular';
import { HomePage } from '../home/home';
@Component({
selector:'login-page',
templateUrl:'login.html'
export class LoginPage {
constructor(public NavCtrl:NavController,public LoadCtrl:LoadingController){
userInfo:UserInfo={
UserName:'liuzhuang',
PassWord:'111111'
loadDefault(){
let loading = this.LoadCtrl.create({
content:"loading...",//loading框显示的内容
dismissOnPageChange:true, // 是否在切换页面之后关闭loading框
showBackdrop:false 是否显示遮罩层
loading.present();// 弹出load框
setTimeout(()=&{
this.NavCtrl.push(HomePage);//跳转页面
setTimeout(()=&{
loading.dismiss();
// 上面这段代码先是在按下按钮1000毫秒之后挑战页面，再在3000毫秒之后关闭loading框
// 但是因为设置了切换页面之后关闭loading框，因此在切换页面后则关闭loading框
loadCustom(){
let loading = this.LoadCtrl.create({
spinner:"dots",// apinner既是loading框上的图标
// content:`&div class="custom-spinner-container"&
// &div class="custom-spinner-box"&&/div&
// &/div&`,
duration:5000 // loading框持续的时间，默认在触发DidDismiss之后关闭，除非设置了该属性
loading.onDidDismiss(()=&{
console.log("Dismissed loading");
loading.present();
loadText(){
let loading = this.LoadCtrl.create({
spinner:"hide",
content:"loading",
duration:3000
loading.present();
btnClick(){
this.loadDefault();
// this.loadText();
// this.loadCustom();
export class UserInfo{
上述代码主要有以下几个组成部分：
声明了UserInfo类
声明了UserInfo类的实例userInfo，并赋予初值，同时实现和前台两个input双向数据绑定
初始化loading controller
相关标签：
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Copyright (C)
All Rights Reserved | 京ICP备 号-2本文使用Ionic2从头建立一个简单的Todo应用，让用户可以做以下事情：
查看todo列表
添加新的todo项
查看todo详情
保存 todo到持久化存储
0 开始之前
本教程需要你了解基本的Ionic 2概念。已经在电脑上安装了Ionic 2。如果没有，先去安装和学习吧。
1 创建新的Ionic 2工程
我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架，但有一些示例代码供我们使用。
运行以下命令创建新项目
ionic start ionic-todo blank
一旦代码生成,在文本编辑器打开项目。可以看到Ionic 2项目的基本结构， 这些是由Ionic CLI生成的代码。
基本上,我们的应用程序中的所有组件(我们的应用程序将由不同的组件组成)将在 src 文件夹中(包括app文件夹中的根组件和在pages文件夹中我们所有的页面组件)。一个组件将包括一个模板（.html文件)，类定义(.ts文件)，或者一些样式(.scss文件)。同组件类似，您还可能创建诸如服务services(如稍后我们将创建的数据服务)，但没有模板和样式，但在结构上类似一个正常的组件。这些服务也被称作“providers”将被放置在一个providers文件夹。
现在,只有一个HomePage组件,设置一个虚拟视图。在我们的应用程序中我们要修改这个来显示的所有待办事项列表。
先从自动生成的**src/ponent.ts文件开始来看一下：
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HomePage } from '../pages/home/home';
@Component({
template: `&ion-nav [root]="rootPage"&&/ion-nav&`
export class MyApp {
rootPage = HomeP
constructor(platform: Platform) {
platform.ready().then(() =& {
StatusBar.styleDefault();
ponent.ts文件中定义了根组件（root component）。相比其他组件该组件是特殊的,因为它是第一个组件被加载到应用程序,从那里我们可以显示更多的组件,可以添加更多的组件等等。基本上,我们的应用程序结构就像一棵树，根组件就是树的根。
因此,重要的是我们的根组件（root component）知道在哪里可以找到我们的HomePage主页,因为需要将它设置为root page根页面。注意,我们导入(importing)HomePage 在这个文件主页的顶部,然后在下面的代码中设置它作为根页面（ root page**）:
rootPage: any = HomePage;
我们可以在构造函数上面声明变量，像上面这样的使其成员变量 member variables,这意味着他们可以通过引用this.myVal在整个类中被被访问，同时，它也将在您的模板中可用。 ： any 只是一个TypeScript语言的内容，意味着rootPage可以是任何(any)类型。如果你不适应 TypeScript，并感到困惑，那也不用担心——你可以把类型抛开，您的应用程序仍然会工作的很好。我不会在本教程中使用类型，除了依赖注入是不可替代的地方(我们将稍后介入)。如果你想知道更多关于在Ionic 2中使用类型，应该学习TypeScript或ECMAScript 6相关知识。root page 根页面是您应用程序显示的第一个页面,然后你可以从这里导航到其他页面。改变Ionic 2应用程序中的视图可以通过改变这一根页面,或 push 推或 pop弹出视图。推一个视图将会改变展现，弹出它将删除当前视图并回到前面的视图。关于导航的更详细的解释,我推荐看看一个相关的Ionic 2导航指南。
2. 设置主页（Home page）
现在我们已经建立了基本的应用程序，让故事开始吧。首先,让我们建立todo列表模板。
2.1 创建模板
按照下面的内容修改 src/pages/home/home.html ：
color="secondary"&
ion-button icon-only (click)="addItem()"& name="add-circle"&&&
*ngFor="let item of items" (click)="viewItem(item)"&{{item.title}}&
注意这里使用的语法在列表中使用*ngFor*，创建了一个速记到嵌入的模板中。这样就不用迭代输出了:
*ngFor="let item of items" (click)="viewItem(item)"&{{item.title}}&
根据DOM(文档对象模型)，嵌入式模板将会为每个项（items）创建特定的数据。所以,如果我们的items数组(稍后将定义在类定义)有4项，那么& ion-item &将渲染四次。还要注意,我们使用的 let item ，循环分配一个items数组项给item。这允许我们引用其属性,并传递到viewItem函数。
我们将标题设置为Todos（待办事项）!我们设计一个按钮使用& ion-buttons &。因为这里有个end属性，按钮将被放置在end的位置。不同属性的行为可能会有所不同，取决于在什么平台上运行，以iOS为例,将end会将按钮放到导航栏的右边。还要注意,按钮本身我们给它一个属性的ion-button将会使用Ionic 2 的按钮样式，而icon-only样式将会让按钮只包含一个图标没有文本。
我们使用 (click) 来附加一个点击监听器到这个元素，这里将在在home.ts中调用addItem()函数。
2.2 创建类
按如下修改src/pages/home/home.ts：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {
constructor(public navCtrl: NavController) {
ionViewDidLoad(){
this.items = [
{title: 'hi1', description: 'test1'},
{title: 'hi2', description: 'test2'},
{title: 'hi3', description: 'test3'}
addItem(){
viewItem(){
还记得大明湖畔的夏雨荷吗？哦不是，还记得之前我们如何给homePage分配一个any类型变量吗?现在我们在构造函数中分配一个NavController类型给navCtrl参数。这就是Ionic 2 的依赖注入工作模式，基本上是一种方式告诉应用程序“我们希望通过navCtrl引用到NavController”。通过添加公共关键字在它面前,它会自动创建一个成员变量。这意味着我们现在可以引用NavController通过在类里任意使用this.navCtrl。
现在我们已经建立了一些假的数据(我们使用ionViewDidLoad生命周期钩子，这将在页面加载时被触发)，您应该能够看到它已经在列表中渲染了：
Todos 列表页面
在运行 ionic serve 时，因为既然我们导入了NavController服务，我们就可以在这个组件push或pop视图，如下所示：
.navCtrl.push();
ionic g page AddItemPage
我们已经创建了添加和查看项目的方法，在更进一步之前我们不得不先创建 AddItemPage andItemDetailPage 组件。
2.3 添加项目
我们将要创建一个新组件让我们添加新的todo项。当然，这只是一个简单的表单提供了标题和描述来创建todo。
运行如下命令来生成一个add-item页面
ionic g page AddItemPage
任何时候当我们创建一个新页面，我们需要确保该页面被导入（imported）到我们的 app.module.ts，然后在entryComponents和declarations数组中被声明。
按如下修改 src/app/app.module.ts ：
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './ponent';
import { HomePage } from '../pages/home/home';
import { AddItemPage } from '../pages/add-item-page/add-item-page';
@NgModule({
declarations: [
AddItemPage
imports: [
IonicModule.forRoot(MyApp)
bootstrap: [IonicApp],
entryComponents: [
AddItemPage
providers: []
export class AppModule {}
就像上次，我们先创建组件的模版。
2.4 建立新增项目模版
按如下内容修改 src/pages/add-item-page/add-item-page.html :
color="secondary"&
ion-button icon-only (click)="close()"& name="close"&&&
floating&Title&
type="text" [(ngModel)]="title"&&
floating&Description&
type="text" [(ngModel)]="description"&&
full ion-button color="secondary" (click)="saveItem()"&Save&
这里没有什么太疯狂的开始。这次我们定义了另一个按钮,简单地调用了定义在add-item-page.ts中的saveItem函数。我们还有另一个按钮指向一个close方法——因为这个页面作为一个Mode模式的页面，我们希望能把页面关闭，所以我们也会在add-item-page.ts定义这个方法。现在我们有一些输入框了，它们又有[(ngModel)]属性，这个就是双向绑定。任何作用到title字段的改变都将立即影响到add-tiem-page.ts（我们马上要讲到）里面的this.title成员变量。反之亦然，任何this.title上的改变都将立即影响到模版。同样注意到我们的保存按钮上使用了full属性，这个方便的小属性帮助我们设置按钮宽度为full。
2.5 建立添加项的类
现在我们将要建立一个类给我们的添加项组件。
按如下内容修改 add-item-page.ts：
import { Component } from '@angular/core';
import { NavController, ViewController } from 'ionic-angular';
@Component({
selector: 'page-add-item-page',
templateUrl: 'add-item-page.html'
export class AddItemPage {
constructor(public navCtrl: NavController, public view: ViewController) {
saveItem(){
let newItem = {
title: this.title,
description: this.description
this.view.dismiss(newItem);
this.view.dismiss();
这里我们导入了一个怪异的服务：ViewController，可以用于模态（Modals）页面的关闭（dismiss）。
除此之外,我们创建了saveItem函数来创建newItem对象,它使用当前的标题和描述值(即我们建立双向数据绑定，无论用户输入什么)，然后我们关闭视图，同时我们也传入了newItem在dismiss方法中。这将允许我们建立一个侦听器，当回到主页(就是那个启动这个页面的另外一个页面)时获取数据。通过这种方式,我们可以从一个页面传递数据到另一个页面(然而，记住，模态不需要在页面之间传递数据)。
2.6 在主页保存新增项
就像我提到的，我们把要保存的数据返回发送给HomePage。我们现在导入import我们新增的AddItemPage组件到HomePage，当用户点击新增时我们就创建出该视图。
按如下内容修改 src/pages/home/home.ts :
import { Component } from '@angular/core';
import { ModalController, NavController } from 'ionic-angular';
import { AddItemPage } from '../add-item-page/add-item-page'
@Component({
selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {
public items = [];
constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
ionViewDidLoad(){
addItem(){
let addModal = this.modalCtrl.create(AddItemPage);
addModal.onDidDismiss((item) =& {
this.saveItem(item);
addModal.present();
saveItem(item){
this.items.push(item);
viewItem(item){
你看上面这个文件的顶部，可以发现我们现在导入import了AddItemPage组件。这时我们就可以用这个页面创建模态页面了，具体看addItem方法。注意我们这里建立了一个onDidDismiss监听器，这样就可以获取模态关闭时回传的数据，并通过saveItem方法保存。现在，我们仅通过将数据push到items数组，最终，我们将保存到数据库。我们已经移除了假数据，因为现在用户输入通过saveItem方法被添加到了this.items。我们将items初始为空。
2.7 查看项目
现在，我们想要一个功能，就是用户点击todo列表里面的某一项，然后可以看到该项的细节信息（例如：这里只有描述可以看了，实际可以根据需要扩展，呵呵）。要做这个我们应该知道这是又要创建一个新组件了啊。
还记得如何创建页面吗，运行下面的代码创建一个 item-detail 页面:
ionic g page ItemDetailPage
time and time again，我们需要在 app.module.ts 文件中设置一下，三件事：import，declarations， entryComponents：
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './ponent';
import { HomePage } from '../pages/home/home';
import { AddItemPage } from '../pages/add-item-page/add-item-page';
import { ItemDetailPage } from '../pages/item-detail-page/item-detail-page';
@NgModule({
declarations: [
AddItemPage,
ItemDetailPage
imports: [
IonicModule.forRoot(MyApp)
bootstrap: [IonicApp],
entryComponents: [
AddItemPage,
ItemDetailPage
providers: []
export class AppModule {}
按照顺序是该写模版了，开始：
千篇一律，按照下面的内容自行修改 src/pages/item-detail-page/item-detail-page.html :
color="secondary"&
{{description}}
相比其他模版，这里相当的直白。我们只是使用& ion-card &指令简单装饰下，并输出标题和描述，值将在item-detail-page.ts中定义。
好，继续按照下面的内容自行修改 src/pages/item-detail-page/item-detail-page.ts ：
import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';
@Component({
selector: 'page-item-detail-page',
templateUrl: 'item-detail-page.html'
export class ItemDetailPage {
constructor(public navParams: NavParams){
ionViewDidLoad() {
this.title = this.navParams.get('item').
this.description = this.navParams.get('item').
当我们把这个页面将传入的数据项,点击,然后我们把物品的标题和描述,使用NavParams。
现在我们要做的是在home.ts 内设置 viewItem 函数和导入新的细节页面。
src/pages/home/home.ts 修改如下：
viewItem(item){
this.navCtrl.push(ItemDetailPage, {
item: item
添加的导入代码放在 src/pages/home/home.ts 的顶部：
import { ItemDetailPage } from '../item-detail-page/item-detail-page';
这时就可以push出项目的细节页面，然后传入被点击的项目。如果你现在点击存在于列表中的项目，你可能看到如下界面：
项目细节页面
3 持久化数据保存
Todo应用程序现在将基本工作,但数据没有被存储在任何地方只要你刷新应用程序你将失去你所有的数据(不理想)。
现在我们要做的是创建一个服务被称为Data用来处理存储和检索数据。我们将使用Ionic 2提供的Stroage服务来帮助我们做到这一点。Stroage服务是Ionic 2的通用存储服务,它负责存储数据的最佳方式,同时提供了一致的API供我们使用。
这意味着,如果您正在设备上运行，安装了SQLite插件，那么它将使用一个本地SQLite数据库进行存储，否则它将退回到使用基于浏览器的存储(可能被操作系统擦除)。
运行下面代码创建服务
ionic g provider Data
data.ts 代码修改如下：
import { Storage } from '@ionic/storage';
import {Injectable} from '@angular/core';
@Injectable()
export class Data {
constructor(public storage: Storage){
getData() {
return this.storage.get('todos');
save(data){
let newData = JSON.stringify(data);
this.storage.set('todos', newData);
这个是有点不同于我们已经创建的组件(它可能更合适认为是service)。我们不使用@component装饰，而使用@Injectable声明这个类。
在构造函数中,我们建立一个 Storage 服务的引用。
数组中save函数简单地将所有的项放入数组并保存到存储，每当项目变化我们将调用这个函数。
我们还将需要设置的Storage服务,以及 Data provider,在我们 app.module.ts 文件。
src/app/app.module.ts 修改如下：
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './ponent';
import { HomePage } from '../pages/home/home';
import { AddItemPage } from '../pages/add-item-page/add-item-page';
import { ItemDetailPage } from '../pages/item-detail-page/item-detail-page';
import { Storage } from '@ionic/storage';
import { Data } from '../providers/data';
@NgModule({
declarations: [
AddItemPage,
ItemDetailPage
imports: [
IonicModule.forRoot(MyApp)
bootstrap: [IonicApp],
entryComponents: [
AddItemPage,
ItemDetailPage
providers: [Storage, Data]
export class AppModule {}
请注意,我们已经声明这些在providers的数组,而不是declarations或entryComponents数组。
现在我们需要更新。ts使用这项新服务。
src/pages/home/home.ts 文件修改如下：
import { Component } from '@angular/core';
import { ModalController, NavController } from 'ionic-angular';
import { AddItemPage } from '../add-item-page/add-item-page'
import { ItemDetailPage } from '../item-detail-page/item-detail-page';
import { Data } from '../../providers/data';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {
public items = [];
constructor(public navCtrl: NavController, public modalCtrl: ModalController, public dataService: Data) {
this.dataService.getData().then((todos) =& {
if(todos){
this.items = JSON.parse(todos);
ionViewDidLoad(){
addItem(){
let addModal = this.modalCtrl.create(AddItemPage);
addModal.onDidDismiss((item) =& {
this.saveItem(item);
addModal.present();
saveItem(item){
this.items.push(item);
this.dataService.save(this.items);
viewItem(item){
this.navCtrl.push(ItemDetailPage, {
item: item
这是我们最后的一些代码。再次,我们importing数据服务,通过传递给构造函数。我们依然设置 items 开始是空的，使用数据服务获取数据。重要的是要注意getData 返回promise而不是数据本身。抓取的数据存储是异步的，这意味着我们的应用程序将继续运行当数据加载时。promise让我们数据完成加载时执行一些操作,而不需要暂停整个应用程序。
最后,我们还添加一个调用save 函数保存在数据服务当一个新的条目被添加。现在该函数将马上更新我们的新数据条目数组，但items也将被复制保存到数据服务,以便下次我们回到应用程序是可用。
在本教程中我们已经介绍了如何实现很多Ionic 2应用的常用功能：
监听和处理事件
视图之间的导航
在视图之间传递数据
建立双向数据绑定
显然还有很多我们可以做，使这个应用程序更漂亮，添加删除和编辑笔记的能力等等。
浏览: 346493 次
来自: 昆明
我们https://yunba.io/也是基于MQTT协议实现 ...
GoEasyweb 推送基于websocket 和pollin ...
tedeum 写道produces 注意版本问题，老的版本不支 ...
并没有下载地址啊
请教一下博主，Geoserver的相关开发资料从哪找得到，官方 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'