替代不纯管道的角度6？
我试图编写一个简单的todo应用程序来学习角6。在我的应用程序中，待办事项可以是完成的，也可以是未完成的，我想在页脚组件中显示未完成的待办事项的数量。
我有一个待办事项组件，它显示了待办事项列表：
todos.component.ts
export class TodosComponent implements OnInit {
todos: Todo[];
constructor(private todoService: TodoService) {
this.todos = todoService.GetAll();
}
ngOnInit() {}
ToggleTodoCompleted(id: number): void{
this.todoService.Toggle(id);
}
}添加待办事项的另一个组件：
todo-add.component.ts
export class TodoAddComponent implements OnInit {
constructor(private todoService: TodoService) { }
ngOnInit() {}
AddTodo(todoTitle){
let todo = new Todo();
todo.title = todoTitle;
this.todoService.Add(todo);
}
}一个页脚组件，我使用一个不纯的管道来显示其中未完成的待办事项的数量：
footer.component.ts
export class FooterComponent implements OnInit {
todos: Todo[] = [];
constructor(private todoService: TodoService) {
this.todos = todoService.GetAll();
}
ngOnInit() {}
}uncompleted-todos.pipe.ts
@Pipe({
name: 'uncompletedTodos',
pure: false
})
export class UncompletedTodosPipe implements PipeTransform {
transform(todos: Todo[]): any {
return todos.filter(t=>t.completed===false);
}
}footer.component.html
{{(todos|uncompletedTodos).length}} items left一个简单的服务：
todo.service.ts
export class TodoService {
private todos: Todo[] = [];
GetAll(): Todo[]{
return this.todos;
}
Add(todo: Todo): void{
todo.id = this.todos.length + 1;
todo.completed = false;
this.todos.push(todo);
}
Toggle(id: number): void{
let todo = this.todos.find(t => t.id === id);
todo.completed = !todo.completed;
}
}但我在角度文档中读到，不纯管道会导致性能问题。那么，还有什么可以替代的呢？没有这个肮脏的管道，我怎么能写我的代码呢？
回答 1
Stack Overflow用户
发布于 2018-07-24 06:29:47
这是对就在文件里的解释：
不提供过滤或排序列表的管道..。这不是疏忽。不提供这样的管道，因为它们的性能很差，并且防止了激进的缩小.角团队和许多有经验的角度开发人员强烈建议将过滤和排序逻辑移到组件本身，
这意味着您应该摆脱管道，并将逻辑直接放入组件中。
例如，编辑，将逻辑放入特性本身：
export class TodoService {
private todos: Todo[] = [];
GetAll(): Todo[]{
return this.todos;
}
GetUncompleted() {
return this.todos.filter(td => !td.completed);
}
...编辑2您的问题来自这样一个事实:在组件启动时，您只分配了一次todo的值。
这意味着当您将项添加到待办事项列表中时，您无法看到更改，因为您没有更新该值。
为此，有两种解决方案:第一种是使用getter。
Getter是一种特殊的函数，每当调用它们时都会更新它们的值。它使用起来很简单。例如，在您的todo.component中，它将提供以下内容：
get todos() { return this.todoService.getAll(); }现在，您可以在模板中使用
*ngFor="let todo of todos"这将被更新。
这里是一个stackblitz，向您展示getter如何工作。
第二个解决方案是使用RxJS。这是一个事件解决方案:当您的列表被更新时，您必须触发一个事件。因为这个解决方案比较困难，所以我制作了这一堆闪电战来帮助您理解它。
基本情况是，每当您的列表被更新时，您的组件就会收到一个事件，告诉他们必须更新待办事项列表。
https://stackoverflow.com/questions/51491731
复制相似问题
腾讯云开发者
