登录
目录
当前位置： 首页 > 文档资料 > Ionic 2 从入门到精通 >

项目：Giflist - 第五课：设置

优质
小牛编辑
126浏览
2023-12-01

现在应用运行良好 — 来自reddit的GIF，过滤了文件格式，然后以video元素进行展示。
我们当前设置了gifs作为默认subdreddit，对于本应用来讲是个不错的选择，用户也可以根据喜好对他进行变更。当你离开应用稍后重新进入的时候，他会重新设置为默认的gifssubreddit。当用户对gifs不敢兴趣的时候这会变得很烦人。
所以我们将要做的事制作一个Settings页，用户可以在其中进行如下操作：

  • 默认subreddit
  • 每页加载的GIF数量
  • 排序方式

实现类似这样的功能也让我们有机会去学习如何永久存储数据这个应用将在用户返回的时候记得用户设置。

制作一个Settings页

我们将使用Modal模态页来打开设置页。打开模态页和普通页面有些许不同，普通页面的打开基本就是应用的导航流的操作了。模态页基本上是一个可以在页面上显示然后关闭的单独页面（你应该对其他网页模态页很熟悉，例如Facebook的照片预览）。
任何页面都可以作为模态页来打开，所以我们可以像创建其他页面那样来创建我们的Settings页面。我们先从定义Settings页的模板开始。
> 修改 src/pages/settings/settings.html 为如下：

  1. <ion-header>
  2.     <ion-toolbar color="secondary">
  3.         <ion-title>Settings</ion-title>
  4.         <ion-buttons end>
  5.             <button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
  6.         </ion-buttons>
  7.     </ion-toolbar>
  8. </ion-header>
  9. <ion-content padding>
  10.     <ion-card>
  11.         <ion-card-header>
  12.         About
  13.         </ion-card-header>
  14.         <ion-card-content>
  15.         <p><strong>Giflist</strong> is a client for <strong>reddit</strong>
  16.         that will endlessly <strong>stream GIFs</strong> from <strong>any
  17.         subreddit that predominantly contains gifs</strong>. By default
  18.         it uses the popular <strong>gifs</strong> subreddit, but you can
  19.         change this to whatever you like, e.g: perfectloops, me_irl,
  20.         chemicalreactiongifs.</p>
  21.         <br />
  22.         <p>To play a GIF, just tap it. To view the original submission for
  23.         any GIF, just tap the title section and it will open in reddit.
  24.         You can configure some settings for the application below.
  25.         Enjoy!</p>
  26.         </ion-card-content>
  27.     </ion-card>
  28.     <h3>Subreddit</h3>
  29.     <ion-input type="text" placeholder="enter subreddit name..." [(ngModel)]="subreddit"></ion-input>
  30.     <h3>Sort</h3>
  31.     <ion-segment color="secondary" [(ngModel)]="sort">
  32.     <ion-segment-button value="hot">
  33.     Hot
  34.     </ion-segment-button>
  35.     <ion-segment-button value="top">
  36.     Top
  37.     </ion-segment-button>
  38.     <ion-segment-button value="new">
  39.     New
  40.     </ion-segment-button>
  41.     </ion-segment>
  42.     <h3>Per Page</h3>
  43.     <ion-segment color="secondary" [(ngModel)]="perPage">
  44.     <ion-segment-button value="5">
  45.     5
  46.     </ion-segment-button>
  47.     <ion-segment-button value="10">
  48.     10
  49.     </ion-segment-button>
  50.     <ion-segment-button value="15">
  51.     15
  52.     </ion-segment-button>
  53.     </ion-segment>
  54.     <button ion-button full (click)="save()" color="secondary" style="margin:20px 0px;">Save Settings</button>
  55. </ion-content>

这里没做什么疯狂的事情。我们像往常那样定义了navbar，然后给他添加了一个按钮用于调用close函数关闭窗口。
我们添加了一个用来向用户展示应用信息，然后我们定义了一些不同的输入域。我们定义了一个文本输入域来设置subreddit，我们使用了片段组件来控制sort和perPage值。所有这些数据都通过[(ngModel)] 进行了双向数据绑定，这样在类定义里面就可以很容易访问到了。
> 修改 src/pages/settings/settings.ts 为如下：

  1. import { Component } from '@angular/core';
  2. import { ViewController, NavParams } from 'ionic-angular';
  4. @Component({
  5.     selector: 'page-settings',
  6.     templateUrl: 'settings.html'
  7. })
  9. export class SettingsPage {
  10.     perPage: number;
  11.     sort: string;
  12.     subreddit: string;
  14.     constructor(public view: ViewController, public navParams: NavParams) {
  15.         this.perPage = this.navParams.get('perPage');
  16.         this.sort = this.navParams.get('sort');
  17.         this.subreddit = this.navParams.get('subreddit');
  18.     }
  20.     save(): void {
  21.         let settings = {
  22.             perPage: this.perPage,
  23.             sort: this.sort,
  24.             subreddit: this.subreddit
  25.         };
  26.         this.view.dismiss(settings);
  27.     }
  29.     close(): void {
  30.         this.view.dismiss();
  31.     }
  32. }

可能你一眼就看到了我们在这里用navParams来获取一些值。早Home页启动Settings页的时候我们会传过来一些值作为Settings页的预设值。
另一个比较奇怪的是我们导入了ViewController — 当以Modal的方式来启动本页的时候我们需要用到他在页面里关闭本身。在这里我们需要在用户点击关闭或者保存按钮的时候关闭页面。如果用户点击关闭按钮的话，我们就不用保存设置。
在接下来的部分我们会处理设置的保存，但是你可以会想要怎么才能做到呢 — 这里的save函数不是用来保存一些数据的吗？由于Modal的工作方式的原因，我们可以从以模态框方式启动的页面在关闭的时候返回数据，所以在这里我们调用视图的dismiss函数的时候将会把新的设置值回传到Home页面，也就是Setting页面的启动也 — 我们会在其中操作数据的保存。

以模态页的方式打开Settings页

现在，定义好了Settings页面，我们需要已模态也的方式启动他。我们早就在页首设置了一个按钮来打开设置页，所以我们只要完成openSettings函数就可以了。
> 修改 src/pages/home/home.ts 的 openSettings 函数为如下：

  1. openSettings(): void {
  2.     let settingsModal = this.modalCtrl.create(SettingsPage, {
  3.         perPage: this.redditService.perPage,
  4.         sort: this.redditService.sort,
  5.         subreddit: this.redditService.subreddit
  6.     });
  8.     settingsModal.onDidDismiss(settings => {
  9.         if(settings){
  10.             this.redditService.perPage = settings.perPage;
  11.             this.redditService.sort = settings.sort;
  12.             this.redditService.subreddit = settings.subreddit;
  13.             //this.dataService.save(settings);
  14.             this.changeSubreddit();
  15.         }
  16.     });
  18.     settingsModal.present();
  19. }

你也看到了，我们将Settings页传入了正在创建的Modal，同时也传入了Settings需要获取的数据。
我们设置了onDisDismiss监听器用于侦测Moal关闭的时候回传的数据。由于我们只在用户点击保存的时候才会穿数据，所以代码也只会在此时机运行。如果回传了设置数据，我们就要用新的值来更新当前值，同时我们也要使用dataService来保存值到存储（我们还是需要去定义这个服务）。由于我们现在有了新的设置，所以我们需要调用changeSubreddit来重置所有事情和根据新设置加载新的GIF。
注意：由于我们目前没有实现数据服务，我们目前会注释掉这个服务的调用。
最后，我们调用present方法来将模态框展示给用户。

保存数据

谜团的最后一层是制作Data服务来保存设置到存储以及从存储获取设置。
我们将使用Ionic提供的Storage服务来存储数据。这也是我最喜欢的Ionic 2新增功能之一，因为他让复杂的存储流程变得超级简单。存储数据中问题有很多，例如操作系统随机清理本地缓存数据，但是这个存储服务自动使用最佳的存储方式。
> 修改 src/providers/data.ts 为如下：

  1. import { Injectable } from '@angular/core';
  2. import { Storage } from '@ionic/storage';
  4. @Injectable()
  5. export class Data {
  6.     constructor(public storage: Storage) {
  7.     }
  9.     getData(): Promise<any> {
  10.         return this.storage.get('settings');
  11.     }
  13.     save(data): void {
  14.         let newData = JSON.stringify(data);
  15.         this.storage.set('settings', newData);
  16.     }
  17. }

首先，我们在构造器里注入了存储服务。然后我们有两个函数，一个用于获取数据，一个用于存储数据。getData()函数将返回所有存储与存储空间中的‘settings’上的数据，save()将把新的数据存放到存储空间的‘settings’字段上。我们以及在Settings模态框关闭的时候调用了save()，现在我们只需要定义localSettings函数用于在应用打开的时候加载之前保存的设置。
> 修改 src/pages/home/home.ts 的loadSettings函数为如下：

  1. loadSettings(): void {
  2.     this.dataService.getData().then((settings) => {
  3.         if(settings && typeof(settings) != "undefined"){
  4.             let newSettings = JSON.parse(settings);
  5.             this.redditService.settings = newSettings;
  6.             if(newSettings.length != 0){
  7.                 this.redditService.sort = newSettings.sort;
  8.                 this.redditService.perPage = newSettings.perPage;
  9.                 this.redditService.subreddit = newSettings.subreddit;
  10.             }
  11.         }
  12.         this.changeSubreddit();
  13.     });
  14. }

此处我们简单的调用了data服务的getData函数，当数据返回的时候，我们将他JSON为一个对象，读取数据到Reddit提供者的成员变量。然后我们调用了changeSubreddit函数来触发使用新数据加载新帖子。
现在我们有了数据服务的实现，我们可以拿掉拿掉之前数据解除之前的注释。
> 修改 home.ts的 openSettings 函数为如下：

  1. openSettings(): void {
  2.     let settingsModal = this.modalCtrl.create(SettingsPage, {
  3.         perPage: this.redditService.perPage,
  4.         sort: this.redditService.sort,
  5.         subreddit: this.redditService.subreddit
  6.     });
  8.     settingsModal.onDidDismiss(settings => {
  9.         if(settings){
  10.             this.redditService.perPage = settings.perPage;
  11.             this.redditService.sort = settings.sort;
  12.             this.redditService.subreddit = settings.subreddit;
  13.             this.dataService.save(settings);
  14.             this.changeSubreddit();
  15.         }
  16.     });
  18.     settingsModal.present();
  19. }

总结

现在我们完成了设置页和数据服务，应用的功能就全部完成了！虽然现在看起来还是那么难看。
所以我们还有一节课的时间来添加一些自定义的样式让他好看些。

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn