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

이 글에서는 angular의 컴포넌트 통신과 컴포넌트 라이프사이클을 이해하고, 컴포넌트 내부로 데이터를 전송하는 방법과 외부로 데이터를 전송하는 방법을 간략하게 소개하는 것이 도움이 되기를 바랍니다. 모두에게!

컴포넌트 통신

---

1. 데이터를 컴포넌트 내부로 전달

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

// favorite.component.ts
import { Input } from '@angular/core';
export class FavoriteComponent {
    @Input() isFavorite: boolean = false;
}

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

참고: 외부에 [] 表示绑定动态值，在组件内接收后是布尔类型，不加 [] 表示绑定普通值，在组件内接收后是字符串类型 추가 속성 .

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

import { Input } from '@angular/core';

export class FavoriteComponent {
  @Input("is-Favorite") isFavorite: boolean = false
}

2. 구성 요소가 데이터를 외부로 전송합니다.

요구 사항: 하위 구성 요소의 버튼을 클릭하여 상위 구성 요소로 데이터를 전달합니다.

<!-- 子组件模板 -->
<button (click)="onClick()">click</button>

// 子组件类
import { EventEmitter, Output } from "@angular/core"

export class FavoriteComponent {
  @Output() change = new EventEmitter()
  onClick() {
    this.change.emit({ name: "张三" })
  }
}

<!-- 父组件模板 -->
<app-favorite (change)="onChange($event)"></app-favorite>

// 父组件类
export class AppComponent {
  onChange(event: { name: string }) {
    console.log(event)
  }
}

구성 요소 수명 주기

---

1. 마운팅 단계

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

1) constructor

Angular는 컴포넌트 클래스를 인스턴스화할 때 실행되며, Angular가 주입한 서비스 인스턴스 객체를 전달받는 데 사용할 수 있습니다.

export class ChildComponent {
  constructor (private test: TestService) {
    console.log(this.test) // "test"
  }
}

2), ngOnInit

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

<app-child name="张三"></app-child>

export class ChildComponent implements OnInit {
  @Input("name") name: string = ""
  ngOnInit() {
    console.log(this.name) // "张三"
  }
}

3), ngAfterContentInit

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

<app-child>
	<div #box>Hello Angular</div>
</app-child>

export class ChildComponent implements AfterContentInit {
  @ContentChild("box") box: ElementRef<HTMLDivElement> | undefined

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

4), ngAfterViewInit

구성요소 뷰가 렌더링될 때 호출됩니다.

<!-- app-child 组件模板 -->
<p #p>app-child works</p>

export class ChildComponent implements AfterViewInit {
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> | undefined
  ngAfterViewInit () {
    console.log(this.p) // <p>app-child works</p>
  }
}

2, 업데이트 단계

1), ngOnChanges

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

• 동시에 입력 속성을 몇 개나 변경해도 Hook 함수는 한 번만 실행되며, 변경된 값은 동시에 파라미터에 저장됩니다

• 파라미터 유형은 SimpleChanges이고, 하위 속성은 유형은 SimpleChange

• 기본 데이터 유형의 경우 값이 변경되는 한 감지됨

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

기본 데이터 유형 값 변경

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

export class AppComponent {
  name: string = "张三";
  age: number = 20
  change() {
    this.name = "李四"
    this.age = 30
  }
}

export class ChildComponent implements OnChanges {
  @Input("name") name: string = ""
  @Input("age") age: number = 0

  ngOnChanges(changes: SimpleChanges) {
    console.log("基本数据类型值变化可以被检测到")
  }
}

참조 데이터 유형 변경

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

export class AppComponent {
  person = { name: "张三", age: 20 }
  change() {
    this.person = { name: "李四", age: 30 }
  }
}

export class ChildComponent implements OnChanges {
  @Input("person") person = { name: "", age: 0 }

  ngOnChanges(changes: SimpleChanges) {
    console.log("对于引用数据类型, 只能检测到引用地址发生变化, 对象属性变化不能被检测到")
  }
}

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

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

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

3. 언로드 단계

1), ngOnDestroy

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

export class HomeComponent implements OnDestroy {
  ngOnDestroy() {
    console.log("组件被卸载")
  }
}

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 각도 학습에서는 구성 요소 통신 및 구성 요소 수명 주기에 대해 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!