为什么[ngStyle]在页面渲染时被多次调用？

Question

我有一个使用 [ngStyle] = "getStyle()" 的 Angular 页面，当我运行页面时，似乎 getStyle() 已被调用多次。谁能解释为什么会发生这种行为？

模板：

  <div class="toast" data-autohide="false" [ngStyle]="getStyle()">
    <div class="toast-header">
      <strong class="mr-auto text-primary">{{comment.username}}</strong>
      <small class="text-muted">5 mins ago</small>
    </div>
    <div class="toast-body">
      {{comment.comment}}
    </div>
  </div>

TS代码：

  getStyle(): Object {

    this.x = Math.floor((Math.random() * 100));
    this.y = Math.floor((Math.random() * 30));

    console.log('random process ', this.x, this.y);
    
    return {
      left: this.x+'px',
      top: this.y+'px'
    };

浏览器控制台打印的日志：

Answer 1

如果您使用的是默认更改检测策略，则每个更改检测周期都会调用绑定到属性和指令的函数。插值函数也是如此，例如 {{ getStyle() }}.

您需要在控制器中运行函数一次，将其结果保存在一个变量中，然后将属性绑定到它。

控制器

export class SomeComponent {
  style: any;

  ngOnInit() {
    this.style = this.getStyle();
  }

  getStyle(): Object {
    this.x = Math.floor((Math.random() * 100));
    this.y = Math.floor((Math.random() * 30));

    console.log('random process ', this.x, this.y);
    
    return {
      left: this.x + 'px',
      top: this.y + 'px'
    };
  }
}

模板

<div class="toast" data-autohide="false" [ngStyle]="style">
  ...
</div>

为什么[ngStyle]在页面渲染时被多次调用？

Why [ngStyle] is called many times during page rendering?

ng-style

angular