javascript - 如何将组件重构为使用服务 Angular 2

Question

最近我制作了一个可以运行的 Angular 2 todo 应用程序，但是我没有为这个应用程序使用服务，而且我听说使用服务是可行的方法。但我不完全确定如何重构我的代码，以便我可以将数据推送到我的服务中。

我的组件:

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");
  } 

}

我认为我可以使用该服务将我的数据推送到那里，而不是让组件来处理它。因此该服务可用于其他组件。

我很乐意收到回复。

Answer 1

您可以将待办事项存储在服务中，而不是对组件中的变量执行操作，当您想要更改数组时，只需调用服务函数即可。 Services tutorial in the official docs 中对此进行了很好的介绍，但只是举一个获取和添加待办事项的简短示例:

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

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

添加待办事项，调用服务进行添加。

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

您的 TodoService 看起来在代码方面完全正确，所以您的代码几乎都在那里 :)