Angular 2 RC1: Mehrere Komponenten, Todo-Liste, Taskaktualisierung hinzufügen

Question

Entwickeln einer Todo-Liste, die eine Aufgabe hinzufügen kann. Alles funktioniert, wenn der gesamte Code aus einer Komponente (Tasklist) und einem Service (Taskservice) besteht. Wenn Sie jedoch versuchen, eine Komponente von mehreren Komponenten zu trennen (Jobliste und Add-Task), wird die Tabelle mit der Liste der Aufgaben nicht bei Hinzufügen aktualisiert. Hier ist unsere Implementierung.

Tasklist:

import { Component, OnInit, Inject } from '@angular/core'; 
import { TaskService } from '../task.service'; 
import { Observable } from 'rxjs/Observable'; 
import { Task } from '../task'; 


@Component({ 
    moduleId: module.id, 
    selector: 'app-tasklist', 
    providers: [TaskService], 
    template: ' 

<table> 

<tr> 
    <td><a>Complete</a></td> 
    <td><a>Name</a></td> 
    <td><a>Due Date</a></td> 
    <td>Option</td> 
</tr> 

<tr *ngFor="let item of items" [items] = "items"> 
    <td> 
     <p> {{item.Name}} </p> 
    </td> 
    <td> 
     <p> {{item.DueDate}} </p> 
    </td> 

</tr> 

</table> 

', 
    styleUrls: ['tasklist.component.css'] 
}) 
export class TasklistComponent implements OnInit { 

    public items : Task[]; 

    constructor(private service: TaskService){} 

    ngOnInit(){ 
    this.getTasks(); 
    } 

    getTasks(){ 
    this.service.Get().subscribe(e => this.items = e); 
    } 
} 

AddTaskComponent:

import { Component, Input} from '@angular/core'; 
import { TaskService } from '../task.service'; 
import { TasklistComponent } from '../tasklist/tasklist.component'; 
import { Task } from '../task'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-addtask', 
    providers: [TaskService, TasklistComponent], 
    directives: [TasklistComponent], 
    template: ' 
<form> 
    <input type="text" [(ngModel)]="taskname" placeholder="Task name" > 
    <input type="text" [(ngModel)]="duedate" placeholder="Due Date" > 
    <input type="submit" value="Submit" (click)="addTask()" > 
</form> 
', 
    styleUrls: ['addtask.component.css'] 
}) 

export class AddtaskComponent { 

    public taskname : string; 
    public duedate : string; 

    @Input() items:Task[]; 

    constructor(private service : TaskService){} 

    addTask(){ 
    this.service.Post(this.taskname, this.duedate).subscribe(e=>{ 
     this.getTasks(); 
     return e; 
    }); 

    this.taskname = ''; 
    this.duedate = ''; 
    } 

    getTasks() { 
    this.service.Get().subscribe(e => this.items = e); 
    } 

} 

Die addTask() -Methode zur Liste hinzufügt, aber führt nicht zu der Taskliste, es sei denn die in der Ansicht zu aktualisieren Seite aktualisiert.

Die grundlegende Frage: Wie kann eine einzelne Komponente korrekt in mehrere Komponenten aufgeteilt werden, ohne dass der Benutzer die Seite aktualisiert?

Answer 1

Geben Sie keine Komponenten

providers: [TaskService, TasklistComponent], 

sollte in

directives: [TasklistComponent] 

providers: [TaskService], 

Komponenten gehen nur, wenn Sie die TaskService auf jede Komponente zur Verfügung stellen, dann wird jede Komponente Erhalte eine eigene Instanz. Stellen Sie es nur einmal an der Root-Komponente (AppComponent) oder an einem anderen gemeinsamen Elternelement der Elemente bereit, an denen Sie die gleiche Serviceinstanz teilen möchten.