Angular 아동-부모 커뮤니케이션 - 단순화

저는 여러분에 대해 잘 모르지만, 젊은 개발자로서 간단한 단계로 분류하는 것이 제 뇌를 어떤 방식으로 느끼게 합니다.

먼저 구성 요소를 부모 또는 자식으로 간주하게 만드는 요소에 대해 이야기해 봅시다. 예, 알아요. 쉽지만 참아주세요. 처음에는 이해가 안 됐는데 아마 당신도 나와 같은 배를 타고 있을 겁니다.
<app-parent> 및 <app-child> 두 개의 구성 요소가 있다고 가정해 보겠습니다.

이러한 구성 요소는 일반적으로 .html, spec.ts, .css 및 .ts 파일로 구성됩니다.

부모 구성 요소는 부모의 html 파일에 자식의 html 선택기를 보유합니다.

parent.html

<h1>Hi this is the parent component, I hold the child component below.</h1>
<app-child></app-child>

이제 모든 것이 정렬되었으므로 일부 데이터를 전달하겠습니다.

1단계 - 자식의 데이터를 출력해 봅시다.

child.ts 파일에서

import { Output, EventEmitter } from '@angular/core'

@Output() variableEvent = new EventEmitter();

아무 이름이나 지정할 수 있지만 대부분의 사람들은 변수 이름 끝에 '이벤트'라는 단어를 붙입니다. @Output() 및 EventEmitter를 가져오는 것을 잊지 마십시오. 경우에 따라 EventEmitter를 자동으로 가져오면(그리고 주의를 기울이지 않으면) 잘못된 파일에서 가져올 수 있으므로 @angular/core에서 가져오는지 확인하세요.

2단계 - 시작하겠습니다. (클릭) 버튼 기능에서 트리거할 수 있습니다. 또는 구성 요소가 onInit로 초기화되거나 함수를 트리거하기로 결정한 여러 가지 방법이 있을 때.

child.ts 파일에서

functionName() {
this.variableEvent.emit(value)
}

가치는 당신이 필요로 하는 모든 것입니다. 숫자, 변수, 부울 등.

3단계

parent.ts 파일에서

variable;

variableEvent($event) {
this.variable = $event;
}

함수의 이름은 무엇이든 지정할 수 있지만 하위 함수의 EventEmitter와 동일하게 유지하는 것이 좋습니다. 이 함수는 호출하는 하위 함수에 의해 트리거됩니다. 따라서 다른 함수 안에 넣지 마십시오.

4단계

이제 함께 연결해 봅시다.

parent.html 파일에서

<app-child (variableEvent)="variableEvent($event)></app-child>

그러면 자녀에게서 부모에게 데이터가 전달되어야 합니다. 이것이 나 같은 다른 초보자에게 도움이 되었기를 바랍니다! 이에 대한 자세한 지식은 Angular 문서에 있습니다. 꼭 확인하세요!