开发一个能够添加任务的待办事项列表。当所有代码都是一个组件(任务列表)和一个服务(任务服务)时,一切正常。但是,当尝试将一个组件分离到多个组件(任务列表和添加任务)时,包含任务列表的表不会在添加时更新。这是我们的实现。
任务列表:
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
) 或要共享同一服务实例的元素的其他公共父级提供一次。