각도 변화 감지 - 변화 감지기 분리

안녕하십니까, 이 시리즈에서는 Angular Change Detection에 대해 논의하고 있습니다. 지난 게시물에서는 OnPush 변경 감지 전략에 대해 논의했습니다. 여기서 변경 감지기 연결 및 분리를 사용하여 변경 감지를 사용자 정의하는 방법을 살펴보겠습니다.

변경 감지기 분리

따라서 여기서 개념은 구성 요소에서 변경 감지기를 분리할 때와 같습니다. Angular는 해당 구성 요소와 해당 하위 트리에 대한 변경 감지를 수행하지 않으며 다시 연결하면 변경 감지가 발생합니다.
예를 들어 보겠습니다. 전체 예는 GitHub 및 Stackblitz 에서 참조할 수 있습니다.
여기에 부모와 자식 2개의 구성 요소가 있으며 변경 감지에서 자식 구성 요소를 분리하고 일부 조건에 따라 연결합니다.
이를 위해 이 접근 방식을 사용할 수 있도록 생성자에 ChangeDetectorRef를 주입해야 합니다.

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';

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

  constructor(private cdr:ChangeDetectorRef) { }

  ngOnInit(): void {
    this.cdr.detach();
  }
}

`

부모 구성 요소에는 해당 구성 요소에 표시하고 자식 구성 요소에 입력으로 전달하는 데이터 변수가 있으며 데이터는 HTML 템플릿에 표시됩니다. 이 외에 부모 구성 요소에는 데이터 값을 증가시키는 버튼이 있습니다. 하위 구성 요소에 있는 두 개의 버튼은 분리하고 다른 하나는 변경 감지를 다시 연결하는 것입니다. 설정은 아래 스크린샷과 같습니다.

이제 값 증가 버튼을 클릭하면 두 구성 요소에서 값이 변경되는 것을 볼 수 있습니다. 이제 분리 버튼을 클릭하고 버튼으로 값을 늘리면 부모 구성 요소의 값이 변경되지만 자식 구성 요소는 변경되지 않습니다. .
최신 값을 얻으려면 Reattach 버튼을 클릭하면 각도가 변경 감지를 수행하고 두 구성 요소에서 최신 값을 볼 수 있습니다.
예제를 실험하려면 아래 StackBlitz 터미널에서 시도해 볼 수 있습니다.
ChangeDetectorRef의 도움으로 변경 감지를 담당하는 방법을 이해할 수 있기를 바랍니다.
마음에 드셨다면 친구와 공유하거나 제안 사항이 있으면 아래에 연락하거나 댓글을 달아주세요.
다음 시간까지 행복한 학습!