각도 학습에서는 구성 요소 통신 및 구성 요소 수명 주기에 대해 설명합니다.

컴포넌트 통신

<app-favorite [isFavorite]="true"></app-favorite>

// favorite.comComponent.ts

구성 요소에 데이터를 전달합니다.

'@angular/core'에서 { 입력 }을 가져옵니다.
내보내기 클래스 FavoriteComponent {
    @Input() isFavorite: 부울 = false;
}

[관련 튜토리얼 권장 사항: "angular tutorial"]

참고: 속성 외부에 [] 추가하는 것은 동적 값을 바인딩하는 것을 의미하며, [] 추가하지 않으면 일반 값을 바인딩하는 것을 의미합니다. 구성 요소에서는字符串类型입니다.

<app-favorite [is-Favorite]="true"></app-favorite>

import { 입력 } from '@angular/core';

내보내기 클래스 FavoriteComponent {
  @Input("is-Favorite") isFavorite: 부울 = false
}

2. 컴포넌트가

데이터를 외부로 전송해야 합니다. 하위 컴포넌트

<!-- Sub-composite template-->

<button (click)="onClick()">click</button>

// 하위 구성 요소 클래스 import { EventEmitter, Output } from "@angular/core"

내보내기 클래스 FavoriteComponent {
  @Output() 변경 = 새 EventEmitter()
  온클릭() {
    this.change.emit({ 이름: "장산" })
  }
}

<!-- 상위 구성요소 템플릿 -->
<app-favorite (change)="onChange($event)"></app-favorite>

// 상위 구성 요소 클래스 내보내기 클래스 AppComponent {
  onChange(이벤트: { 이름: 문자열 }) {
    console.log(이벤트)
  }
}

구성요소 수명주기

1. 마운팅 단계

마운팅 단계의 수명주기 기능은 마운팅 단계 중 한 번만 실행되며 데이터가 업데이트되면 더 이상 실행되지 않습니다.

1) 생성자

Angular는 구성 요소 클래스를 인스턴스화할 때 실행되며 Angular에 의해 주입된 서비스 인스턴스 개체를 받는 데 사용할 수 있습니다.

내보내기 클래스 ChildComponent {
  생성자(비공개 테스트: TestService) {
    console.log(this.test) // "테스트"
  }
}

2)

처음으로 입력 속성 값을 받은 후 ngOnInit이 실행되며, 여기서 요청한 작업을 수행할 수 있습니다.

<app-child name="Zhang San"></app-child>

내보내기 클래스 ChildComponent는 OnInit {를 구현합니다.
  @Input("name") 이름: 문자열 = ""
  ngOnInit() {
    console.log(this.name) // "장산"
  }
}

3) ngAfterContentInit는

콘텐츠 프로젝션의 초기 렌더링이 완료된 후 호출됩니다.

<앱-자식>
	<div #box>안녕하세요 Angular</div>
</app-child>

내보내기 클래스 ChildComponent는 AfterContentInit을 구현합니다.
  @ContentChild("box") 상자: ElementRef<HTMLDivElement> |

  ngAfterContentInit() {
    console.log(this.box) // <div>Hello Angular</div>
  }
}

4) ngAfterViewInit은

컴포넌트 뷰가 렌더링된 후에 호출됩니다.

<!-- 앱-하위 구성요소 템플릿 -->
<p #p>app-child 작동</p>

내보내기 클래스 ChildComponent가 AfterViewInit을 구현합니다.
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> | 정의되지 않음
  ngAfterViewInit() {
    console.log(this.p) // <p>app-child 작동</p>
  }
}

2. 업데이트 단계

1), ngOnChanges는

• 입력 속성 값이 변경될 때 실행되며, 초기 설정 시에도 한 번 실행됩니다.

• 동시에 입력 속성이 몇 개 변경되더라도 Hook 기능은

ngOnInit보다 좋습니다.

• 한 번만 실행되며, 변경된 값은 동시에 저장됩니다. 매개변수에서

• 매개

• 변수 유형은 SimpleChanges이고 하위 속성 유형은 SimpleChange입니다.

• 값 변경

• 참조 데이터 유형의 경우 한 객체에서 다른 객체로의 변경을 감지할 수 있지만 동일한 객체의 속성 값 변경은 구성 요소 템플릿 업데이트 데이터에 영향을 미치지 않습니다.

기본 데이터 유형 값 변경

<app-child [name]="name" [age]="age"></app-child>
<button (click)="change()">변경</button>

내보내기 클래스 AppComponent {
  이름: 문자열 = "장산";
  나이: 숫자 = 20
  변화() {
    this.name = "이思"
    this.age = 30
  }
}

내보내기 클래스 ChildComponent가 OnChanges를 구현합니다.
  @Input("name") 이름: 문자열 = ""
  @Input("age") 연령: 숫자 = 0

  ngOnChanges(변경사항: SimpleChanges) {
    console.log("기본 데이터형 값의 변화를 감지할 수 있습니다.")
  }
}

참조 데이터 유형 변경

<app-child [person]="person"></app-child>
<button (click)="change()">변경</button>

내보내기 클래스 AppComponent {
  사람 = { 이름: "张三", 나이: 20 }
  변화() {
    this.person = { 이름: "이思", 나이: 30 }
  }
}

내보내기 클래스 ChildComponent가 OnChanges를 구현합니다.
  @Input("person") 사람 = { 이름: "", 나이: 0 }

  ngOnChanges(변경사항: SimpleChanges) {
    console.log("참조 데이터 유형의 경우 참조 주소의 변경만 감지할 수 있으며 객체 속성의 변경은 감지할 수 없습니다.")
  }
}

2), ngDoCheck: 주로 디버깅에 사용되며 기본 데이터 유형이든 참조 데이터 유형이든 참조 데이터 유형의 속성 변경이든 입력 속성이 변경되는 한 실행됩니다.

3), ngAfterContentChecked: 콘텐츠 프로젝션 업데이트가 완료된 후 실행됩니다.

4), ngAfterViewChecked: 컴포넌트 뷰가 업데이트된 후 실행됩니다.

3. 제거 단계

1), ngOnDestroy는

구성 요소가 제거되기 전에 호출되어 정리 작업에 사용됩니다.

내보내기 클래스 HomeComponent는 OnDestroy를 구현합니다.
  ngOnDestroy() {
    console.log("구성요소가 제거되었습니다.")
  }
}