我有一个ListComponent和EntryComponent,用于将一个项目附加到列表中。当项目通过DataService推入列表时,列表不会在ListComponent中更新。有关 angular2 工作方式的任何想法吗?
列出服务:
import {Injectable} from "angular2/core";
@Injectable()
export class DataService{
public items:Array<any> = [];
addItem(item:string):void{
this.items.push(item);
console.log(this.items);
}
}
简单列表组件:
import { Component, Input, Output } from 'angular2/core';
import {ChangeDetectionStrategy} from "angular2/core";
@Component({
selector: "list",
template: "<div><ul><li *ngFor='#item of items'>{{item}}</li></ul>",
changeDetection:ChangeDetectionStrategy.OnPush
})
export class ListComponent{
@Input() items:Array<any>;
}
条目组件:
import {Component,EventEmitter, Output} from "angular2/core";
@Component({
selector:'entry-form',
template:'<div><input type="text" #myinput (keyup.enter)="emitEntry(myinput)"/></div>'
})
export class EntryComponent{
@Output() newEntry = new EventEmitter();
emitEntry(input):void{
this.newEntry.emit(input.value);
input.value="";
}
}
App Component(根组件):
import { Component } from 'angular2/core';
import { ListComponent } from './list.component';
import {DataService} from './list-service';
import {EntryComponent} from './entry-form';
@Component({
selector:'my-app',
directives:[ListComponent,EntryComponent],
providers:[DataService],
template:
"<list [items]='listService.items' ></list> " +
"<entry-form (newEntry)='listService.addItem($event)'></entry-form> "
})
export class AppComponent{
constructor(public listService: DataService){
}
}
修改 通过将此行添加到DataService中的addItem()方法,我能够生成正确的结果:
this.items = this.items.splice(0,this.items.length-1);
但是,这似乎不是 angular2 方式。
提前致谢!
修改 这是代码的plunker
答案 0 :(得分:1)
删除'changeDetection:ChangeDetectionStrategy.OnPush'
将组件留待:
@Component({
selector: "list",
template: "<div><ul><li *ngFor='#item of items'>{{item}}</li></ul>"
})
你可以看到它here
答案 1 :(得分:0)
使用ChangeDetectionStrategy.OnPush
,如果至少有一个组件的输入属性发生了变化,Angular将仅检查组件的数据绑定(例如模板中的{{item}}
)。另一个重要的信息是,对于作为数组的输入属性,Angular change detection仅检查数组的引用更改 - 即,它仅检查数组引用是否已更改,而不是数组的内容。
由于数组输入属性items
在服务器上push()
新项目时继续指向(引用)相同的数组,因此Angular变化检测不会认为数组已更改,因此检测到Listcomponent
没有输入属性更改,因此它不会检查组件的数据绑定。
删除ChangeDetectionStrategy.OnPush
是有效的,因为默认情况下,即使输入属性未更改,角度更改检测也会检查所有数据绑定。由于您对数组的每个元素都有绑定,因此更改检测会在重新评估ngFor
时注意到有新的绑定。