为什么console.log()在调用文本插值方法后在Angular中打印多次?

Question

我使用了文本插值调用一个方法

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");
}
}

chrome浏览器控制台中它显示:-

[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.

Answer 1

看看Angular的变更检测。模板会被反复评估，以确保它显示的数据与组件中的实际数据匹配。您通常不应该像现在这样从模板中调用函数(在必须对函数求值才能加载模板的上下文中)，除非您切换到OnPush更改检测策略，因为任何副作用(如打印到控制台)都会在响应生成的事件等事件时反复和零星地发生。这也不利于性能，因为函数可以在短时间内调用多次。

无论如何，做你想做的事情没有什么意义。如果一个函数不返回任何东西，或者有影响模板显示的副作用，为什么要从模板调用这个函数呢?如果想显示数据，可以将其保存到组件属性中，然后显示:

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
text: string = "Some text!";
}

然后

<p>{{text}}</p>

---

我提到了OnPush变化检测策略，但我会小心使用它。它可能会产生相反的效果，当你期望模板更新时，它根本不会被更新。它在这里也没有多大用处，因为从模板中打印没有多大意义(除了可能用于调试目的)。

Answer 2

应避免在模板中调用方法。

https://plainenglish.io/blog/angular-dont-call-a-function-inside-the-template-anymore