Javascript 如何使用ServiceAngular 2重构组件

最近，我做了一个有角度的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");
  } 

}

我认为我能够使用该服务将数据推送到那里，而不是让组件来处理这个问题。因此，该服务可用于其他组件

---

我很乐意得到回复。

您可以将TODO存储在服务中，而不是对组件中的变量执行操作，当您想要更改阵列时，只需调用服务函数即可。这一点在中有很好的介绍，但仅举一个获取和添加TODO的简短示例：

在component中，在OnInit中获取TODO，并存储在局部变量中

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

添加todo时，请调用服务进行添加

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

您的

TodoService

在代码方面看起来完全正确，因此您的代码几乎完全正确：）