Question

最近我做了一个有角度的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代码完全正确，所以几乎所有代码都在那里：）

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

1 个答案: