Question

我注意到，当您使用具有输入属性的自定义组件并将功能绑定到该功能时，该功能被称为很多次。

例如

<some-tag [random-input]="randomFunction()"></some-tag>

在班上

private randomFunction() {
    console.log('Called!');
    return true
}

如果您运行的是这样简单的内容，您将在控制台中看到几十个“ Called！”。日志。在我的项目中，randomFunction调用了数据库，所以这很烦人。

有人知道为什么会这样吗？

Answer 1

Angular需要检查值是否已更改，否则无法更新组件内部的值。

Answer 2

Angular使用every cycle运行此命令，尝试检查更新的值，这就是为什么您在日志中看到这么多消息的原因。

因此，将ts函数用作组件的输入不是一个好习惯。

例如，您可以在constructor，OnInit或OnChanges中调用服务器/数据库，将结果存储到局部变量中，然后将该变量作为组件的输入。与此类似：

export class MyComp {
   dbResult: any;

   constructor(http: HttpClient) {
     http.get('/my/api/call').subscribe(result => {
       this.dbResult = result;
     });
   }
   ....
}

..和HTML：

<some-tag [random-input]="dbResult"></some-tag>

作为旁注，将功能标记为private最终将在ng build --prod期间失败

自定义组件属性绑定多次触发

2 个答案: