Question

开发能够添加任务的待办事项列表。当所有代码都是一个组件（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);
  }
}

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

}

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

基本问题：如果没有用户刷新页面，如何将单个组件正确分成多个组件？

Answer 1

不提供组件

 providers: [TaskService, TasklistComponent],

应该是

 providers: [TaskService],

组件只进入

directives: [TasklistComponent]

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

Angular 2 RC1：多个组件，Todo List，添加任务更新

1 个答案: