如何重构组件使用服务Angular 2

问题描述：

最近我做了一个角度2 todo应用程序正在工作，但即时通讯没有为这个应用程序使用服务，并且我听说使用服务是要走的路。但我不完全确定我是如何重构我的代码，以便我可以将数据推送到我的服务中。如何重构组件使用服务Angular 2

我的组件：

import { Component } from '@angular/core'; 
import { Todo } from './todo'; 
import { TODOS } from './mock-todos'; 
import { TodoService } from './todo.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.sass'], 
    providers: [TodoService] 
}) 
export class AppComponent { 
    title = 'Todo List'; 
    selectedTodo: Todo; 
    completed = false; 

    constructor(private todoService: TodoService){ 

    } 

    onSelect(todo: Todo): void { 
    this.selectedTodo = todo; 
    } 

    addTodo(value: any) { 
    this.todoService.addTodo(value); 
    console.log(value); 
    } 
    deleteTodo(todo) { 
    this.todos.splice(todo,1); 
    console.log("This todo has been deleted"+ todo); 
    } 
    completedTodo(todo){ 
    todo.isCompleted = !todo.isCompleted; 
    todo.completed = !todo.completed; 
    } 


}

我的服务：

import { Injectable } from '@angular/core'; 
import { Todo } from './todo'; 

@Injectable() 
export class TodoService { 
    todos: Todo[] = []; 
    lastId: number = 0; 

    constructor() { } 

    addTodo(value: any) { 
    this.todos.push(value); 
    console.log("This was pushed"); 
    } 

}

我想我是能够使用该服务有把我的数据，而不是让组件来处理这一点。所以该服务可以用于其他组件。

我很乐意得到这个答复。

答

不是对组件中的变量执行操作，而是可以在服务中存储您的待办事项，并且当您想对数组进行更改时，只需调用服务功能即可。这在Services tutorial in the official docs中已经很好地涵盖了，但只是举个简单的例子来获取和添加待办事项：

在组件中，获取OnInit中的待办事项并存储在局部变量中。

ngOnInit() { 
    this.todos = this.todoService.getTodos() 
}

添加一个待办事项，调用服务做添加。

addTodo(todo) { 
    this.todoService.addTodo(todo) 
}

你TodoService长相codewise完全正确的，所以你几乎都在那里与您的代码:)

如何重构组件使用服务Angular 2

相关推荐