Почему ngdocheck () снова называется после ngaftercontentchecked () как для AppComponent, так и для ChildComponent во вр ⇐ Javascript

[Anonymous]

Я использую Angular 19. Я создал простой проект, чтобы лучше понять крючки жизненного цикла. Я заметил, что ngdocheck () снова называется после ngafterContentCecked () как для AppComponent, так и для ChildComponent. Почему это так? Это поведение видно как в режиме разработки, так и в режиме разработки. < /P>
Вот исходный код для того, что я пробовал: < /p>
App.component.html: написан
Click Me


< /code>
App.component.ts:

import { AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, DoCheck, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { ChildComponent } from './child/child.component';

@Component({
selector: 'app-root',
imports: [ChildComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit, OnChanges, OnDestroy, DoCheck, AfterContentInit,
AfterContentChecked, AfterViewInit, AfterViewChecked {

constructor() {
console.log('Inside AppComponent constructor()');
}

ngOnInit(): void {
console.log('Inside AppComponent ngOnInit()');
}

ngOnDestroy(): void {
console.log('Inside AppComponent ngOnDestroy()');
}

ngOnChanges(changes: SimpleChanges): void {
console.log('Inside AppComponent ngOnChanges()');
}

ngDoCheck(): void {
console.log('Inside AppComponent ngDoCheck()');
}

ngAfterContentInit(): void {
console.log('Inside AppComponent ngAfterContentInit()');
}

ngAfterContentChecked(): void {
console.log('Inside AppComponent ngAfterContentChecked()');
}

ngAfterViewInit(): void {
console.log('Inside AppComponent ngAfterViewInit()');
}

ngAfterViewChecked(): void {
console.log('Inside AppComponent ngAfterViewChecked()');
}

counter = 0;

incrementCounter() {
this.counter++;
}

}

< /code>
child.component.html:

Counter value: {{ counterValue }}

< /code>
child.component.ts:

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

@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrl: './child.component.scss'
})
export class ChildComponent {

constructor() {
console.log('Inside ChildComponent constructor()');
}

ngOnInit(): void {
console.log('Inside ChildComponent ngOnInit()');
}

ngOnDestroy(): void {
console.log('Inside ChildComponent ngOnDestroy()');
}

ngOnChanges(changes: SimpleChanges): void {
console.log('Inside ChildComponent ngOnChanges()');
}

ngDoCheck(): void {
console.log('Inside ChildComponent ngDoCheck()');
}

ngAfterContentInit(): void {
console.log('Inside ChildComponent ngAfterContentInit()');
}

ngAfterContentChecked(): void {
console.log('Inside ChildComponent ngAfterContentChecked()');
}

ngAfterViewInit(): void {
console.log('Inside ChildComponent ngAfterViewInit()');
}

ngAfterViewChecked(): void {
console.log('Inside ChildComponent ngAfterViewChecked()');
}

@Input({alias: 'value'}) counterValue:number = 0;

}


Подробнее здесь: https://stackoverflow.com/questions/796 ... -the-appco