为啥在页面渲染过程中会多次调用 [ngStyle]？

Posted 2023-03-06

【中文标题】为啥在页面渲染过程中会多次调用 [ngStyle]？

【英文标题】：Why [ngStyle] is called many times during page rendering?为什么在页面渲染过程中会多次调用 [ngStyle]？

【发布时间】：2021-06-19 22:19:28

【问题描述】：

我有一个使用 [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'
    ;

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

【参考方案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>