0

开发能够添加任务的待办事项列表。当所有代码都是一个组件（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() 方法将其添加到列表中，但除非页面刷新，否则不会导致任务列表在视图中更新。

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

4

1 回答 1

0

不提供组件

 providers: [TaskService, TasklistComponent],

应该 

 providers: [TaskService],

组件只进入

directives: [TasklistComponent]

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

于 2016-06-08T14:56:57.773 回答