Angular2学习教程之ng中变更检测问题详解

开发中遇到的问题

在开发中遇到一个这样的问题，代码不便透露，这里用简单的例子还原一下问题所在：

有三个组件，第一个是用来展示Todo列表的组件TodoComponent，Todo是个类，包含id和name属性。

{{ item.name }}

`,}) export class TodoComponent{ @Input() todos: Todo[];

public getTodos():Todo[]{
return this.todos;
}
}

第二个组件同样是一个Todo列表展示组件TodoDataComponent ，不同的是该组件需要一个TodoComponent类型的输入，并从TodoComponent组件中获得需要展示的Todo数据。

{{ item.name }}

get data`,styleUrls: ['./todo-data.component.css'],inputs: ['todoComponent'],}) export class TodoDataComponent implements OnInit { todoComponent: TodoComponent; todos: Todo[] constructor() { } ngOnInit() { } getData(){ this.todos=this.todoComponent.getTodos(); } }

最后一个是应用的根组件，根组件根据loading值来确定是否加载TodoComponent组件，并展示TodoDataComponent 组件。

next

//app.component.ts
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],})
export class AppComponent implements OnInit {
todos: Todo[];
@ViewChild(TodoComponent)
todoComponent: TodoComponent;
loading: boolean = true;
constructor(private todoService:TodoService){
super(true);
}
ngOnInit(){
this.todoService.todos.subscribe(data => {this.todos=data});
this.todoService.load(0,3);
}
changeall(){
this.todoService.load(3,3);
}
}