Angular 2 RC1:多个组件,待办事项列表,添加任务更新



开发一个能够添加任务的待办事项列表。当所有代码都是一个组件(任务列表)和一个服务(任务服务)时,一切正常。但是,当尝试将一个组件分离到多个组件(任务列表和添加任务)时,包含任务列表的表不会在添加时更新。这是我们的实现。

任务列表

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() 方法将其添加到列表中,但不会导致任务列表在视图中更新,除非刷新页面。

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

不提供组件

 providers: [TaskService, TasklistComponent],

应该是

 providers: [TaskService],

组件仅进入

directives: [TasklistComponent]

如果为每个组件提供TaskService,则每个组件都将获得自己的实例。仅在根组件 ( AppComponent ) 或要共享同一服务实例的元素的其他公共父级提供一次。

相关内容

  • 没有找到相关文章

最新更新