Angular 2 RC1：多个组件，待办事项列表，添加任务更新答案

【问题标题】：Angular 2 RC1: Multiple components, Todo List, adding task updateAngular 2 RC1：多个组件，待办事项列表，添加任务更新
【发布时间】：2016-10-08 22:15:47
【问题描述】：

开发能够添加任务的待办事项列表。当所有代码都是一个组件（Tasklist）和一个服务（Taskservice）时，一切都可以正常工作。但是，当尝试将一个组件分离为多个组件（Tasklist 和 Addtask）时，包含任务列表的表不会在添加时更新。这是我们的实现。

任务列表：

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

添加任务组件：

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

}

addTask() 方法将其添加到列表中，但除非页面刷新，否则不会导致任务列表在视图中更新。

基本问题：如何在不刷新页面的情况下将单个组件正确拆分为多个组件？

【问题讨论】：

标签： angular angular2-template angular2-directives angular2-components

【解决方案1】：

不提供组件

 providers: [TaskService, TasklistComponent],

应该是

 providers: [TaskService],

组件只进入

directives: [TasklistComponent]

如果您在每个组件上都提供TaskService，那么每个组件都会获得自己的实例。仅在根组件 (AppComponent) 或要共享同一服务实例的元素的其他一些公共父级中提供一次。

【讨论】：