Question

在Angular 1中，我们避免在模板表达式中调用过多的函数，例如ng-repeat="item in vm.getFilteredItems()"因为与getFilteredItems的结果无关的属性更改会导致函数在摘要上重复计算并不必要地重新计算，这通常会导致大规模的性能问题。相反，我们绑定到对象，并根据事件进行计算（例如ng-repeat="item in vm.filteredItems）。

在Angular 2中，脏检查过程已经过优化，但是当组件级别的任何属性发生变化时，仍会调用组件模板中调用的函数，无论该函数是否依赖于这些属性。如果使用不当，我预计这会导致相同的性能问题。

以下是Angular 2中不同方法的简化示例：

// function binding in template
@Component({
  selector: 'func',
  template: `
    <input [(ngModel)]="searchTerm" placeholder="searchTerm" />
    <div *ngFor="let name of filteredNames(searchTerm)">{{name}}</div>
  `
})
export class FuncComponent {
  @Input() names:string[];

  filteredNames(searchTerm) {

    if (!searchTerm) return this.names;

    let filteredNames = [];

    return this.names.filter((name) => {
      return name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });
  }
}

-

// no function binding
@Component({
  selector: 'nofunc',
  template: `
    <input [(ngModel)]="searchTerm" (ngModelChange)="search($event)" placeholder="searchTerm" />
    <div *ngFor="let name of filteredNames">{{name}}</div>
  `
})
export class NoFuncComponent implements OnInit {
  @Input() names:string[];

  searchTerm: string;

  ngOnInit() {
    this.search(this.searchTerm);
  }

  search() {
    if (!this.searchTerm) {
      this.filteredNames = this.names;
      return;
    }

    this.filteredNames = this.names.filter((name) => {
      return name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
    });
  }
}

http://plnkr.co/edit/AAFknlJgso3D8F1w3QC1?p=preview

这在Angular 2中仍然是一个问题吗？哪种方法更受欢迎，为什么？谢谢！

Answer 1

您可以创建一个管道。管道（如果pure）仅在依赖值更改时被调用。

@Pipe({
  name: 'search',
//  pure: 'false'
})
class SearchPipe {
  transform(names, searchTerm) {
   if (!this.searchTerm) {
      this.filteredNames = names;
      return;
    }

    return names.filter((name) => {
      return name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
    });
  }
}

@Component({
  selector: 'func',
  pipes: [SearchPipe],
  template: `
    <input [(ngModel)]="searchTerm" placeholder="searchTerm" />
    <div *ngFor="let name of names | search:searchTerm">{{name}}</div>
  `
})
export class FuncComponent {
  @Input() names:string[];
}

如果管道需要识别names中的更改，则需要禁用pure。

如果names被其他实例替换，而不仅仅是添加或删除成员，那么pure工作正常，管道只在names或searchTerm时执行变化。

<强>提示

在devMode（默认）中，更改检测会运行两次，管道的调用次数将是预期的两倍。

Angular 2：从组件模板绑定到函数

1 个答案: