在显示角度模态对话框时不必要的多方法调用

Question

在我的角度（版本9）项目中，我有一个代表模式对话框的组件。在组件模板中，存在以下代码行，这些代码负责对话框标题的表示。

<p mat-dialog-title>{{ generateDialogTitle() }}</p>

在组件打字稿文件中，有一种方法generateDialogTitle():string返回生成的对话框标题（取决于对话框数据）。

通过代码调用模式对话框，当我单击按钮时，此代码被调用一次。

var dialogRef = this.dialog.open(QuestionDetailsComponent, dialogConfig);
dialogRef.afterClosed().subscribe(result => {
  if (result) {
    // if dialog has been accepted
    ... some code here
  }
});

奇怪的是，在显示模式对话框时，方法generateDialogTitle()在组件模板中使用时被多次调用（这是唯一使用它的地方）。

以某种方式隐式调用了多次，但我不明白为什么。

我在调试时在控制台中注意到它。

然后我从模板中删除了对generateDialogTitle()方法的绑定，向类添加了新属性dialogTitle，对话框标题如下所示：

<p mat-dialog-title>{{ dialogTitle }}</p>

我将generateDialogTitle()标记为私有方法，并在构造函数中显式调用它，以将其值分配给dialogTitle属性。

在这种情况下，它只调用了一次。

我不明白，为什么在html-template中直接使用此方法时，会多次（隐式）调用此方法。为什么会发生？这是正常行为吗？

Answer 1

根据@ritaj注释，这是预期的Angular行为。

每次更改检测运行时从模板调用的角度调用函数。

最好在HTML模板中使用属性代替方法。明确分配您的属性，并将其绑定到html-template部分。