junior Frontend Developer in Artcom Venture
@SebastienV - telegram
@shoulddomore - twitter
App
C2
B2
B1
A1
D1
C1
App
C2
B2
B1
A1
D1
C1
C2
B2
D1
C1
Инициализация приложения проходит в два этапа:
выстраивается дерево компонентов
запустить обнаружение изменений компонентов
Все lifecycle hooks будут применены, как часть обнаружения изменений
Зачем constructor(){} :
Зачем ngOnInit(){} :
// some code
@Component({
selector: 'component-one',
templateUrl: './component-one.html',
styleUrls: ['./component-one.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
// some code
@Component({
selector: 'component-two',
templateUrl: './component-two.html',
styleUrls: ['./component-two.css'],
// ChangeDetectionStrategy.Default - это дефолтное значение,
// оно сетить в Default, если не указано обратного
changeDetection: ChangeDetectionStrategy.Default
})
ChangeDetectionStrategy.Default
ChangeDetectionStrategy.OnPush
@Component({
selector: 'parent',
template: `
<child-one></child-one>
<child-two></child-two>
`
})
export class ParentComponent {
// some code
}
@Component({
selector: 'child-one',
template: `
<p>lorem ipsum dolor sit amet</p>
<child-three></child-three>
`
})
export class ChildOneComponent {
// some code
}
обновляет входящие свойства у экземпляров дочерних компонентов
обновляет состояние обнаружения изменений у дочерних view
вызывает на дочерних компонентах хук OnChanges
вызывает хуки OnInit и ngDoCheck на дочерних компонентах
вызывает хуки AfterContentInit, AfterContentChecked, AfterViewInit и AfterViewChecked на экземплярах дочерних компонентов
вызывает хук OnDestroy, если дочерний/родительский компонент удален
обновляет DOM для текущего view
запускает обнаружение изменений для дочерних view
отменяет проверки изменений для текущего view
устанавливает значение false для флага состояния FirstCheck
class ChangeDetectorRef {
markForCheck(): void
detach(): void
detectChanges(): void
checkNoChanges(): void
reattach(): void
}
Angular позводяет нам управлять изменением состоянием view через интерфейсы этого класса ChangeDetectorRef
ChangeDetectorRef.detectChanges()
import {
Component, Input,ChangeDetectionStrategy, ChangeDetectorRef
} from '@angular/core';
@Component({
selector: 'child-component',
template: `
<div class="footer">
<button (click)="refresh()"</button>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
// ^ ограничиваем обнаружение изменений
})
export class ChildComponent {
@Input() someData: any;
constructor(
private _cd: ChangeDetectorRef
) {}
refresh() {
this._cd.detectChanges();
// принудительно запускаем проверку
// обнаружение изменений компонента
}
}
ChangeDetectorRef.markForCheck()
let obj = {
name: 'Bruce',
lastname: 'Wayne'
}
obj.lastname = 'Willis';
obj = {
name:"Lee"
};
ChangeDetectorRef.detach()
@Component({
selector: 'b2',
template: `
<c1></c1>
<c2></c2>
`
})
export class B2 {
constructor(public _cd: ChangeDetectorRef) {
this._cd.detach();
}
}
App
C2
B2
B1
A1
D1
C1
ChangeDetectorRef.reattach()
ChangeDetectorRef.checkNoChanges()