Angular中用文本插值调用方法为何导致console.log多次打印？

相关代码 #

home.component.html #

<p>{{myMethod()}}</p>

home.component.ts #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {
  }

  myMethod(){
    console.log("Hey! I am from Home component");
  }

}

当前控制台输出 #

[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.
Hey! I am from Home component
Hey! I am from Home component
Angular is running in development mode. Call enableProdMode() to enable production mode.
Hey! I am from Home component
Hey! I am from Home component
[webpack-dev-server] Disconnected!
[webpack-dev-server] Trying to reconnect...

期望控制台输出 #

[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.
Hey! I am from Home component
Angular is running in development mode. Call enableProdMode() to enable production mode.

多次打印的原因 #

Angular的变更检测机制会在多种场景下触发，比如组件初始化、数据更新、浏览器事件触发、异步操作完成等。而文本插值里的{{myMethod()}}会在每次变更检测时被执行一次。

另外在开发模式下，Angular会额外多跑一次变更检测，用来校验状态是否稳定，这会进一步增加方法的执行次数。再加上webpack-dev-server的重连等场景，最终就出现了多次打印的情况。

实现单次打印的方案 #

绝对不要在模板表达式（比如文本插值、属性绑定）里调用带副作用的方法，比如console.log、修改变量、发起请求等，正确的做法是提前计算好内容，在模板中直接绑定结果：

改造代码 #

1. 组件类中定义属性存储结果，在生命周期钩子中执行方法：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  displayContent: string;

  constructor() {}

  ngOnInit(): void {
    // 仅在组件初始化时执行一次方法
    this.displayContent = this.myMethod();
  }

  myMethod(){
    console.log("Hey! I am from Home component");
    // 返回需要在模板展示的内容（如果不需要展示可省略返回值）
    return "Home Component Content";
  }
}

2. 修改模板直接绑定属性：

<p>{{displayContent}}</p>

如果你的方法不需要返回内容，只是要执行一次初始化逻辑，直接把逻辑放在ngOnInit或其他合适的生命周期钩子中即可，完全不需要在模板中调用。

内容的提问来源于stack exchange，提问作者Avneet