サービスを使用してコンポーネントをリファクタリングする方法角度2

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

コンポーネント内の変数に対してアクションを実行する代わりに、サービスにtodosを格納することができます。また、配列を変更する場合は、サービス関数を呼び出すだけです。これはServices tutorial in the official docsでかなりカバーされていますが、todosを取得して追加するための短い例をスローするだけです。

コンポーネントでは、todosをOnInitにしてローカル変数に格納します。

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

Todoを追加すると、追加を行うサービスが呼び出されます。

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

あなたTodoServiceルックスは完全に右codewiseので、あなたがあなたのコードであり、ほぼすべてのでした:)