Share
In het eerste deel van de zelfstudiegroep hebt u de gebruikersinterface en navigatie voor de Taakbeheer-app gemaakt. In deze zelfstudie leert u hoe u de functionaliteit van de Ionic-taakbeheertoepassing kunt implementeren en taken kunt toevoegen.
Laten we beginnen door de broncode uit het eerste deel van de zelfstudiegroep te klonen.
git clone https://github.com/royagasthyan/IonicTaskManager-Part1
Navigeer naar de projectdirectory en installeer de vereiste afhankelijkheden.
cd IonicTaskManager-Part1 npm install
Voer uw app uit vanuit de projectdirectory.
ionische serveren
De toepassing moet worden uitgevoerd op http: // localhost: 8100 /.
Je hebt het al gemaakt Toevoegen component en Lijst component om taken toe te voegen en respectievelijk taken weer te geven. Om ze synchroon te laten werken, moet je de communicatie tussen de twee componenten onderhouden. Om te communiceren tussen de componenten, maakt u gebruik van een injecteerbaar CommonService.
Maak een map met de naam service in de src / pages map.
Maak een servicebestand met de naam common.service.ts en voeg de volgende code toe:
Injectable importeren vanuit '@ angular / core'; @Injectable () exportklasse CommonService constructor () this.tasks = []
U houdt de takenlijst bij in de algemene service en deze wordt gedeeld tussen de Toevoegen en Lijst componenten.
Definieer een variabele genaamd taken in de common.service.ts het dossier. Je houdt je takenlijst hierin taken rangschikking.
Injectable importeren vanuit '@ angular / core'; @Injectable () exportklasse CommonService public tasks: any; constructor () this.tasks = []
Maak een map met de naam taak binnen in de src / pages map. Maak een bestand met de naam task.model.ts en voeg de volgende code toe:
exportklasse Taak constructor (openbare ID: Number, public Name: String, public IsDone: Boolean)
Je zult het bovenstaande gebruiken Taak klasse om een exemplaar van een nieuwe taak te maken.
Wanneer de gebruiker op de taakknop Toevoegen klikt vanuit de Toevoegen component, voegt u items toe aan de taken variabele in de common.service.ts het dossier. Dus maak een methode genaamd Voeg taak toe in de common.service.ts bestand, dat u zult bellen vanuit de Toevoegen bestanddeel.
Injectable importeren vanuit '@ angular / core'; import Task uit '... /model/task.model' @Injectable () export class CommonService public tasks: any; constructor () this.tasks = [] addTask (item) this.tasks.push (nieuwe taak ((nieuwe datum ()). getTime (), item, false));
Om een taak aan de takenlijst toe te voegen, moet u de common.service.ts bestand in de Pagina toevoegen bestanddeel.
import CommonService van '... /service/common.service'
Initialiseer de CommonService binnen in de Pagina toevoegen component constructormethode.
constructor (public viewCtrl: ViewController, private commonService: CommonService)
Binnen in de Pagina toevoegen component, maak een methode genaamd toevoegen waar u de taak aan de algemene service toevoegt taken lijst.
Hier is hoe het toevoegen methode in de Pagina toevoegen component ziet eruit:
add () this.commonService.addTask (this.item); this.dismiss ();
Zoals te zien in de bovenstaande methode, hebt u de Voeg taak toe methode van de algemene service om een taak toe te voegen aan de taken lijst.
Nadat het item is toegevoegd, hebt u het ontslaan methode om de pop-up overlay te sluiten. Hier is hoe het add.component.ts bestand ziet er:
Component importeren vanuit '@ angular / core'; import ViewController van 'ionic-angular'; import CommonService van '... /service/common.service' @Component (selector: 'page-add', templateUrl: 'add.component.html') exporteer klasse AddPage openbare taken: any = []; openbaar item: String; constructor (public viewCtrl: ViewController, private commonService: CommonService) dismiss () this.viewCtrl.dismiss (); add () this.commonService.addTask (this.item); this.dismiss ();
In de add.component.html pagina, voeg de ngModel naar het invoerelement.
Voeg de klikgebeurtenis toe aan de knop in de add.component.html om de te activeren toevoegen methode binnen de add.component.ts.
Sla de bovenstaande wijzigingen op en probeer de ionische server opnieuw te starten. Navigeer door de browser-URL naar http: // localhost: 8100 en je zou de mobiele app in de browser kunnen bekijken.
Klik op het pictogram Toevoegen om een taak toe te voegen. Voer de taaknaam in en klik op de knop Toevoegen. De pop-up moet verdwijnen.
Nadat de taak in de takenlijst is toegevoegd, moet u de weergave dienovereenkomstig bijwerken. Dus, om de taak bij te houden wanneer deze aan de lijst wordt toegevoegd, moet u Angular gebruiken Onderwerpen.
Definieer een onderwerp met de naam task_subject binnen in de common.service.ts het dossier.
public task_subject = new Subject()
Wanneer de taak wordt toegevoegd aan de taken lijst, moet u het onderwerp activeren task_subject om de abonnee te informeren dat een taak is toegevoegd.
Wijzig de Voeg taak toe methode binnen de common.service.ts bestand om de volgende code op te nemen:
this.task_subject.next ();
Dit is het aangepaste Voeg taak toe methode:
addTask (item) this.tasks.push (nieuwe taak ((nieuwe datum ()). getTime (), item, false)); this.task_subject.next ();
Abonneer je op het onderwerp task_subject binnen in de list.component.ts het dossier.
constructor (public modalCtrl: ModalController, public commonService: CommonService) this.commonService.task_subject.subscribe (response => this.tasks = this.commonService.tasks;)
Telkens wanneer een nieuwe taak wordt toegevoegd, wordt de taken van de commonService is toegewezen aan de taken in list.component.html en de weergave is bijgewerkt.
Hier is hoe het list.component.ts code ziet er:
Component importeren vanuit '@ angular / core'; import ModalController van 'ionic-angular'; importeer AddPage uit '... /add/add.component'; import CommonService van '... /service/common.service' @Component (selector: 'page-list', templateUrl: 'list.component.html') export class ListPage public tasks = []; constructor (openbare modalCtrl: ModalController, public commonService: CommonService) this.commonService.task_subject.subscribe (response => this.tasks = this.commonService.tasks;) presentAddModal () let addModal = this.modalCtrl.create (Pagina toevoegen); addModal.present ();
Wijzig de list.component.html om te herhalen over de taken variabele van de list.component.ts het dossier. Hier is hoe het eruit ziet:
Itemnaam
Sla de bovenstaande wijzigingen op en start de server opnieuw. Probeer een nieuwe taak toe te voegen en deze wordt weergegeven in het lijstscherm.
Laten we nu de functionaliteit implementeren om de voltooide taken te markeren. Elke keer dat een nieuwe taak wordt toegevoegd, voegt u een toe Is klaar attribuut als vals.
Laten we twee verschillende arrays behouden voor lopende taken en voltooide taken.
public pendingTasks = [] public doneTasks = []
Telkens wanneer een nieuwe taak wordt toegevoegd, werkt u de bovenstaande twee matrices bij zoals afgebeeld:
constructor (openbare modalCtrl: ModalController, public commonService: CommonService) this.commonService.task_subject.subscribe (response => this.pendingTasks = this.commonService.tasks.filter (item => item retourneren.IsDone == false) ; this.doneTasks = this.commonService.tasks.filter (item => item terug.IsDone == true);)
Wanneer de gebruiker op het selectievakje klikt, moet u de Is klaar -status. Voeg een methode toe genaamd checkPendingItem om de Is klaar status voor openstaande taken.
checkPendingItem (id) this.pendingTasks.map ((taak) => if (task.Id == id) if (task.IsDone) task.IsDone = false; else task.IsDone = true; ) this.updateTask ()
Voeg ook een andere methode toe met de naam checkDoneItem om de taakstatus voor voltooide items om te schakelen. Hier ziet u hoe de methode eruitziet:
checkDoneItem (id) this.doneTasks.map ((task) => if (task.Id == id) if (task.IsDone) task.IsDone = false; else task.IsDone = true; ) this.updateTask ()
Zodra de Is klaar status is ingeschakeld, u moet de taken bijwerken. Definieer een methode genaamd updateTask, die is genoemd naar Is klaar schakel in beide bovenstaande methoden.
updateTask () this.pendingTasks = this.commonService.tasks.filter (item => return item.IsDone == false); this.doneTasks = this.commonService.tasks.filter (item => return item.IsDone == true);
Wijzig de list.component.html code om de pendingTasks en doneTasks afzonderlijk. Hier is hoe de gemodificeerde list.component.html bestand ziet er:
Ionic Task Manager Mijn taken Itemnaam Gearchiveerde taken Itemnaam
Sla de bovenstaande wijzigingen op en start de ionische server opnieuw op. De toepassing moet worden uitgevoerd op http: // localhost: 8100.
In deze zelfstudie zag u hoe u de functionaliteit implementeerde om taken toe te voegen en op te sommen in de mobiele Ionic-taakbeheer-app. U zag hoe u een Angular-service gebruikt om gegevens tussen twee componenten te delen. In deze zelfstudie hebt u de Angular-service gebruikt om gegevens in een gemeenschappelijke lijst bij te houden wanneer u deze toevoegt vanuit het component Toevoegen en deze weergeeft in het lijstonderdeel.
Laat het ons weten in de reacties hieronder.
Broncode van deze tutorial is beschikbaar op GitHub.
Accentsconagua