Angular 为什么在初始加载父组件时，子组件会被调用四次？

我有一个父组件和一个子组件。我知道更改检测在HTTP请求、

setInterval

或

setTimeOut

等事件上运行

但是在这里，我没有任何这些事件，但是，当我的父组件最初加载时，子组件方法调用ChildCompo（）四次

当我没有HTTP请求或任何间隔等事件时，为什么在初始加载时执行四次更改检测

AppComponent（父级） ChangeDetComponent.ts（子项）

---

看看下面的演示，没有子组件或父组件

我所拥有的只是

TS

恩戈尼尼特（）{
console.log（'Init'）
}
testFunction（）{
console.log（'TEST'）
}

HTML

{{testFunction（）}

如果您查看控制台，您将看到4个日志，其中包含单词

TEST

，但只有1个'init'。它只是一个按预期工作的函数，函数会分别重新评估

需要注意的是，此重新评估可能会导致您的应用程序变得缓慢。在html中包含函数是个坏主意。函数会重新评估是否有任何细微变化

解释 角型消化循环 你看到的是工作中的消化循环。摘要循环是Angular的自动更新魔法的工作原理——这就是为什么在输入框中键入内容会自动更新任何引用其值的内容。

当摘要循环运行时，它会有效地重新绘制页面上可能已更改的所有内容。

Angular使用一些技巧来发现“可能已经改变的一切”，主要的技术是观察者。当您使用指令（如

ngif

和

ngclass

）以及绑定（如

{{yourBindingHere}}

）时，会自动创建这些观察程序

这些东西中的每一个都有一个观察者。当Angular的摘要循环运行时，每个观察者都被要求更新其状态。对于ng类，它将重新运行绑定到它的函数，以查看是否需要更改任何内容。这就是为什么您的控制器功能会运行多次，并且每次页面上发生变化时，它都会再次运行。
来源

---

看看下面的演示，没有子组件或父组件

我所拥有的只是

TS

恩戈尼尼特（）{
console.log（'Init'）
}
testFunction（）{
console.log（'TEST'）
}

HTML

{{testFunction（）}

如果您查看控制台，您将看到4个日志，其中包含单词

TEST

，但只有1个'init'。它只是一个按预期工作的函数，函数会分别重新评估

需要注意的是，此重新评估可能会导致您的应用程序变得缓慢。在html中包含函数是个坏主意。函数会重新评估是否有任何细微变化

解释 角型消化循环 你看到的是工作中的消化循环。摘要循环是Angular的自动更新魔法的工作原理——这就是为什么在输入框中键入内容会自动更新任何引用其值的内容。

当摘要循环运行时，它会有效地重新绘制页面上可能已更改的所有内容。

Angular使用一些技巧来发现“可能已经改变的一切”，主要的技术是观察者。当您使用指令（如

ngif

和

ngclass

）以及绑定（如

{{yourBindingHere}}

）时，会自动创建这些观察程序

这些东西中的每一个都有一个观察者。当Angular的摘要循环运行时，每个观察者都被要求更新其状态。对于ng类，它将重新运行绑定到它的函数，以查看是否需要更改任何内容。这就是为什么您的控制器功能会运行多次，并且每次页面上发生变化时，它都会再次运行。
来源

---

请分享这两个组件的实际代码。根据提供的信息，不可能知道问题可能是什么。我编辑了我的问题。你知道答案吗@请共享这两个组件的实际代码。根据提供的信息，不可能知道问题可能是什么。我编辑了我的问题。你知道答案吗@OwenKelvinI知道这一点，但我想知道为什么如果没有变化检测，它仍然会运行四次而不是一次？@sdsd有帮助吗？老实说，OwenKelvinI没有，因为答案是关于angularjs的，CD在1版和2+版期间变化很大我知道，但是我想知道为什么如果没有变化检测，它仍然会运行四次而不是一次？@sdsd有帮助吗？老实说，欧文没有，因为答案是关于angularjs的，而且CD在1版和2+版期间变化很大

<app-change-det></app-change-det>

{{ calledChildCompo() }}

@Component({
  selector: 'app-change-det',
  templateUrl: './change-det.component.html',
  styleUrls: ['./change-det.component.scss']
})
export class ChangeDetComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  calledChildCompo() {
    console.log('child compo is called');
  }

}