5

相当标准的情况。

有一个父组件<item-list>。在其模板内*ngFor生成了 20 个子组件<item-block>。[ngStyle]使用调用 function的指令和模板表达式设置的子组件样式setStyles()。

问题（或者可能不是）是，当在一个特定子元素上发出任何事件时，表达式setStyles()会为每个子组件执行两次。

因此，如果我们在示例中单击一个特定项目，并且我们有 20 个<item-block>组件 -setStyles()将执行 20+20 次。

问题是：

  1. 为什么它会发生，它是预期的行为。
  2. 它如何影响性能
  3. 如何避免 - 每个子组件/检测更改只有一次调用。

示例 & plnkr：

plnkr（单击项目 - 打开控制台以进行调试输出）

import {Component} from '@angular/core'

@Component({
  selector: 'item-list',
  template: `
    <item-block
        [item]="item"
        *ngFor="let item of items"
    ></item-block>
  `,
})
export class ItemListComponent {

  items: any[] = [];

  constructor() {}

  ngOnInit() {
     // generate dummy empty items
    for (let i = 0; i < 20; i++) {
      this.items.push(
        {
          value: 'item #' + i; 
        }
      )
    }
  }
}

import {Component, Input} from '@angular/core'

@Component({
  selector: 'item-block',
  template: `
    <div
      class="item"
      [ngStyle]="setStyles()"
      (click)="testClick($event)"
    >{{item.value}}</div>
  `,
})
export class ItemBlockComponent {

  @Input() item: any;

  constructor() {}

  testClick(): void{
      console.log('item clicked');
  }

  setStyles(){
      console.log('seting styles...');
      return {
          'background': '#ccc'
      };
  }
}
4

2 回答 2

3 
[ngStyle]="setStyles()"

setStyles每次运行更改检测时都会调用原因（这可能非常频繁并且会损害性能）。也因为setStyles()每次返回不同的对象实例，它应该会导致异常。“自从上次检查后，表达式发生了变化”或类似的。

不鼓励以这种方式从视图调用方法。

而是将值分配给属性并绑定到该属性：

[ngStyle]="myStyles"
于 2017-01-04T19:06:43.357 回答
1

默认情况下（开发模式）Angular 运行两次检测更改机制。
在生产模式下，它减少到单次更改。

如何将 Detect Changes 机制切换到生产环境？

在main.ts文件中尝试添加：

import { enableProdMode } from '@angular/core';
// ...
enableProdMode();
// ...
platformBrowserDynamic().bootstrapModule(AppModule)

并重新加载应用程序。

于 2017-10-01T21:01:59.583 回答