使用Ionic创建任务管理器应用程序：第2部分

在教程系列的第一部分中，您为任务管理器应用程序创建了用户界面和导航。在本教程中，您将了解如何实现 ionic 任务管理器应用程序添加和列出任务的功能。

入门

让我们从克隆教程系列第一部分的源代码开始。

git clone https://github.com/royagasthyan/IonicTaskManager-Part1

导航到项目目录并安装所需的依赖项。

cd IonicTaskManager-Part1
npm install

从项目目录运行您的应用程序。

ionic serve

您应该让应用程序在 http://localhost:8100/上运行。

组件之间的通信

您已经创建了Add组件和List组件来分别添加任务和列出任务。为了使它们同步工作，您需要保持两个组件之间的通信。要在组件之间进行通信，您将使用可注入的CommonService.

service在文件夹中创建一个文件src/pages夹。

创建一个名为的服务文件common.service.ts并添加以下代码：

import { Injectable } from '@angular/core';

@Injectable()
export class CommonService {
 
	constructor(){
		this.tasks = []
	}
}

您将跟踪公共服务中的任务列表，并将在Add和List组件之间共享。

定义一个tasks在common.service.ts文件中调用的变量。你将把你的任务列表保存在这个tasks数组中。

import { Injectable } from '@angular/core';

@Injectable()
export class CommonService {
    
    public tasks:any;

	constructor(){
		this.tasks = []
	}

}

task在文件夹内创建一个名为的src/pages文件夹。创建一个名为的文件task.model.ts并添加以下代码：

export class Task{
    constructor(
		public Id: Number,
		public Name: String,
		public IsDone: Boolean
	) { }
}

您将使用上述Task类来创建新任务的实例。

当用户单击Add组件中的“添加任务”按钮时，您将向文件中的tasks变量添加项目common.service.ts。因此，创建一个addTask在common.service.ts文件中调用的方法，您将从Add组件中调用该方法。

import { Injectable } from '@angular/core';
import { Task } from '../model/task.model'

@Injectable()
export class CommonService {
    public tasks:any;

	constructor(){
		this.tasks = []
	}

	addTask(item){
		this.tasks.push(new Task((new Date()).getTime(),item,false));
	}
}

将任务添加到列表

为了将任务添加到任务列表中，您需要common.service.ts在组件内导入文件AddPage。

import { CommonService } from '../service/common.service'

初始化组件CommonService内部的AddPage构造方法。

  constructor(public viewCtrl: ViewController, private commonService: CommonService) {  }

在AddPage组件内部，创建一个名为的方法add，您将在其中将任务添加到公共服务tasks列表中。

以下是组件中的add方法的 AddPage外观：

add(){
  this.commonService.addTask(this.item);
  this.dismiss();
}

如上述方法所示，您addTask已从公共服务中调用该方法以将任务添加到tasks列表中。

添加项目后，您已调用该dismiss方法来关闭弹出式覆盖。这是add.component.ts文件的外观：

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
import { CommonService } from '../service/common.service'

@Component({
  selector: 'page-add',
  templateUrl: 'add.component.html'
})
export class AddPage {


  public tasks: any = [];
  public item:String;

  constructor(public viewCtrl: ViewController, private commonService: CommonService) {

  }

  dismiss(){
      this.viewCtrl.dismiss();
  }

  add(){
  	this.commonService.addTask(this.item);
  	this.dismiss();
  }

}

在add.component.html页面中，将ngModel指令添加到输入元素。

<ion-input name="add" [(ngModel)]="item"></ion-input>

给里面的按钮添加点击事件add.component.html来触发add里面的方法add.component.ts。

<button ion-button round (click)="add()">Add</button>

保存上述更改并尝试重新启动ionic服务器。将浏览器 URL 导航到http://localhost:8100，您应该能够在浏览器中查看移动应用程序。

单击添加图标以添加任务。输入任务名称，然后单击添加按钮。弹出窗口应该消失。

列出任务列表项

一旦任务被添加到任务列表中，您需要相应地更新视图。因此，要在添加到列表时跟踪任务，您需要使用 Angular Subject。

定义一个task_subject在common.service.ts文件中调用的主题。

public task_subject = new Subject<String>()

当任务被添加到tasks列表中时，您需要触发主题task_subject以通知订阅者已添加任务。

修改文件addTask内的方法common.service.ts以包含以下代码：

this.task_subject.next();

这是修改后的addTask方法：

addTask(item){
	this.tasks.push(new Task((new Date()).getTime(),item,false));
	this.task_subject.next();
}

订阅文件task_subject内的主题list.component.ts。

constructor(public modalCtrl: ModalController, public commonService:CommonService) {
   this.commonService.task_subject.subscribe(response => {
		this.tasks = this.commonService.tasks;
	})
}

每当添加新任务时，都会将tasksfromcommonService分配给tasksinlist.component.html并更新视图。

以下是list.component.ts代码的外观：

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { AddPage } from '../add/add.component';
import { CommonService } from '../service/common.service'

@Component({
  selector: 'page-list',
  templateUrl: 'list.component.html'
})
export class ListPage {

  public tasks=[];
  constructor(public modalCtrl: ModalController, public commonService:CommonService) {
  	 
  	 this.commonService.task_subject.subscribe(response => {
			this.tasks = this.commonService.tasks;
		})
  }

  presentAddModal() {
   let addModal = this.modalCtrl.create(AddPage);
   addModal.present();
  }

}

修改list.component.html以迭代文件中的tasks变量 list.component.ts。这是它的外观：

<ion-list>

  <ion-item *ngFor="let item of tasks">
    <ion-label>{{item.Name}} </ion-label>
    <ion-checkbox name="chk"></ion-checkbox>
  </ion-item>

</ion-list>

保存上述更改并重新启动服务器。尝试添加一个新任务，它将显示在列表屏幕上。

使用Ionic创建任务管理器应用程序：第2部分第1张

现在让我们实现标记已完成任务的功能。每次添加新任务时，您都会添加一个IsDone属性为false.

让我们为待处理的任务和已完成的任务保留两个不同的数组。

public pendingTasks = []
public doneTasks = []

每次添加新任务时，您将更新上述两个数组，如下所示：

constructor(public modalCtrl: ModalController, public commonService:CommonService) {
   
  this.commonService.task_subject.subscribe(response => {
	this.pendingTasks = this.commonService.tasks.filter(item => {
		return item.IsDone == false
	});
	this.doneTasks = this.commonService.tasks.filter(item => {
		return item.IsDone == true
	});
})
}

当用户单击复选框时，您需要切换IsDone状态。添加一个方法 checkPendingItem来切换IsDone挂起任务的状态。

 checkPendingItem(id){
      
  	this.pendingTasks.map((task) => {
      if(task.Id == id){
        if(task.IsDone){
          task.IsDone = false;
        } 
        else{
          task.IsDone = true;
        }
      }
    })


   this.updateTask()
  	
  }

同样，添加另一个调用方法 checkDoneItem来切换已完成项目的任务状态。以下是该方法的外观：

checkDoneItem(id){
  
  this.doneTasks.map((task) => {
  if(task.Id == id){
    if(task.IsDone){
      task.IsDone = false;
    } 
    else{
      task.IsDone = true;
    }
  }
})


this.updateTask()
  
}

切换状态后IsDone，您需要更新任务。定义一个名为的方法，在上述两个方法中都updateTask在IsDone切换后调用。

updateTask(){
  this.pendingTasks = this.commonService.tasks.filter(item => {
	return item.IsDone == false
  });
  this.doneTasks = this.commonService.tasks.filter(item => {
	return item.IsDone == true
  });
}

修改list.component.html代码以分别显示pendingTasks和doneTasks。修改后的list.component.html文件如下所示：

<ion-header>
    <ion-navbar>
        <ion-title text-center>Ionic Task Manager</ion-title>
    </ion-navbar>

</ion-header>

<ion-content padding>
    <ion-fab top right>
        <button ion-fab mini (click)="presentAddModal()"><ion-icon name="add"></ion-icon></button>
    </ion-fab>

    <ion-card>
        <ion-card-header>
            My Tasks
        </ion-card-header>

        <ion-list>

            <ion-item *ngFor="let item of pendingTasks">

                <ion-label>{{item.Name}} </ion-label>
                <ion-checkbox name="chk" (click)="checkPendingItem(item.Id)" [checked]="item.IsDone"></ion-checkbox>
            </ion-item>

        </ion-list>
    </ion-card>

    <ion-card>
        <ion-card-header>
            Archived Tasks
        </ion-card-header>

        <ion-list>

            <ion-item *ngFor="let item of doneTasks">

                <ion-label color="light">{{item.Name}} </ion-label>
                <ion-checkbox name="chk" (click)="checkDoneItem(item.Id)" [checked]="item.IsDone"></ion-checkbox>

            </ion-item>

        </ion-list>
    </ion-card>

</ion-content>

保存上述更改并重新启动 ionic 服务器。您应该让应用程序在http://localhost:8100上运行。

使用Ionic创建任务管理器应用程序：第2部分第2张