首页 文章

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

提问于
浏览 次
8

在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中仍然是一个问题吗？哪种方法更受欢迎，为什么？谢谢！

angularjs angular

1 回答

  • 5

    你可以创建一个管道 . 管道（如果 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 更改时执行 .

    Hint

    在 devMode （默认）中，更改检测运行两次，管道将被调用两倍于预期 .

    回复于

相关问题