Angular에서 출력 데코레이터를 사용하는 방법

Angular에서 웹 페이지는 재사용 가능한 다양한 구성 요소를 포함할 수 있습니다. 각 구성 요소에는 일반적으로 고유한 TypeScript 논리, HTML 템플릿 및 CSS 스타일이 포함되어 있습니다.

다른 구성 요소 내에서 구성 요소를 재사용할 수도 있습니다. 이 경우 출력 데코레이터를 사용하여 자식 구성 요소의 정보를 부모 구성 요소로 다시 보낼 수 있습니다.

출력 데코레이터를 사용하여 자식 구성 요소에서 발생하는 이벤트를 수신할 수도 있습니다.

자식 구성 요소에 출력 데코레이터를 추가하는 방법

먼저 부모 구성 요소와 자식 구성 요소가 있는 새 Angular 앱을 만들어야 합니다.

부모 및 자식 구성 요소가 있으면 출력 데코레이터를 사용하여 두 구성 요소 간에 데이터를 전송하고 이벤트를 수신할 수 있습니다.

1. 새 Angular 애플리케이션을 만듭니다. 기본적으로 “앱”은 루트 구성 요소의 이름입니다. 이 구성 요소에는 “app.component.html”, “app.component.css” 및 “app.component.ts”의 세 가지 주요 파일이 포함되어 있습니다.
2. 이 예에서 “앱” 구성 요소는 상위 구성 요소 역할을 합니다. “app.component.html”의 모든 콘텐츠를 다음으로 바꿉니다. <div class="parent-component">
  <h1> This is the parent component </h1>
</div>
3. “app.component.css”의 상위 앱 구성 요소에 일부 스타일을 추가합니다. .parent-component {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightcoral;
  padding: 20px
}
4. “ng generate component” 명령을 사용하여 “data-component”라는 새 Angular 구성 요소를 만듭니다. 이 예에서 “data-component”는 자식 구성 요소를 나타냅니다. ng g c data-component
5. “data-component.component.html”의 자식 구성 요소에 콘텐츠를 추가합니다. 현재 콘텐츠를 교체하여 새 버튼을 추가합니다. 사용자가 버튼을 클릭할 때 실행할 기능에 버튼을 바인딩합니다. <div class="child-component">
  <p> This is the child component </p>
  <button (click)="onButtonClick()">Click me</button>
</div>
6. “data-component.component.css”의 자식 구성 요소에 일부 스타일을 추가합니다. .child-component {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightblue;
  margin: 20px;
  padding: 20px
}
7. “data-component.component.ts”에서 컴포넌트의 TypeScript 파일에 onButtonClick() 함수를 추가합니다. onButtonClick() {
}
8. 여전히 TypeScript 파일 내에서 가져오기 목록에 “Output” 및 “EventEmitter”를 추가합니다. import { Component, Output, EventEmitter, OnInit } from '@angular/core';
9. DataComponentComponent 클래스 내에서 “buttonWasClicked”라는 구성 요소에 대한 출력 변수를 선언합니다. 이것은 EventEmitter가 됩니다. EventEmitter는 이벤트가 발생할 때 다른 구성 요소에 알릴 수 있는 내장 클래스입니다. export class DataComponentComponent implements OnInit {
  @Output() buttonWasClicked = new EventEmitter<void>();
  //. ..
}
10. onButtonClick() 함수 내에서 “buttonWasClicked” 이벤트 이미터를 사용합니다. 사용자가 버튼을 클릭하면 데이터 구성 요소가 이 이벤트를 상위 앱 구성 요소로 보냅니다. onButtonClick() {
    this.buttonWasClicked.emit();
}

부모 구성 요소에서 자식 구성 요소의 이벤트를 수신하는 방법

자식 구성 요소의 Output 속성을 사용하려면 부모 구성 요소에서 방출된 이벤트를 수신해야 합니다.

1. “app.component.html” 내부의 자식 구성 요소를 사용합니다. HTML 태그를 생성할 때 “buttonWasClicked” 출력을 속성으로 추가할 수 있습니다. 이벤트를 새 함수에 바인딩합니다. <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
2. “app.component.ts” 내부에 하위 구성 요소에서 발생하는 버튼 클릭 이벤트를 처리하는 새 기능을 추가합니다. 사용자가 버튼을 클릭할 때 메시지를 생성합니다. message: string = ""


   buttonInChildComponentWasClicked() {
    this.message = 'The button in the child component was clicked';
}

3. “app.component.html”에 메시지를 표시합니다. <p>{{message}}</p>
4. 터미널에 “ng serve” 명령을 입력하여 Angular 애플리케이션을 실행합니다. 웹 브라우저에서 localhost:4200으로 엽니다. 부모 구성 요소와 자식 구성 요소는 서로 다른 배경색을 사용하여 쉽게 구분할 수 있습니다.
   
5. Click me 버튼을 클릭합니다. 자식 구성 요소는 메시지를 표시할 부모 구성 요소에 이벤트를 보냅니다.
   

자식 구성 요소에서 부모 구성 요소로 데이터를 보내는 방법

하위 구성 요소에서 상위 구성 요소로 데이터를 보낼 수도 있습니다.

1. “data-component.component.ts”에서 일부 데이터가 포함된 문자열 목록을 저장할 변수를 추가합니다. listOfPeople: string[] = ['Joey', 'John', 'James'];
2. buttonWasClicked 이벤트 이미터의 반환 유형을 수정합니다. 이전 단계에서 선언한 문자열 목록과 일치하도록 void에서 string[]으로 변경합니다. @Output() buttonWasClicked = new EventEmitter<string[]>();
3. onButtonClick() 함수를 수정합니다. 부모 구성 요소에 이벤트를 보낼 때 데이터를 emit() 함수에 인수로 추가합니다. onButtonClick() {
    this.buttonWasClicked.emit(this.listOfPeople);
}
4. “app.component.html”에서 “app-data-component” 태그를 수정합니다. buttonInChildComponentWasClicked() 함수에 “$event”를 추가합니다. 여기에는 자식 구성 요소에서 보낸 데이터가 포함됩니다. <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
5. “app.component.ts”에서 함수를 업데이트하여 데이터에 대한 매개변수를 추가합니다. buttonInChildComponentWasClicked(dataFromChild: string[]) {
    this.message = 'The button in the child component was clicked';
}
6. 하위 구성 요소에서 오는 데이터를 저장하기 위해 “data”라는 새 변수를 추가합니다. message: string = ""
data: string[] = []


   buttonInChildComponentWasClicked(dataFromChild: string[]) {
    this.message = 'The button in the child component was clicked';
    this.data = dataFromChild;
}

7. HTML 페이지에 데이터를 표시합니다. <p>{{data.join(', ')}}</p>
8. 터미널에 “ng serve” 명령을 입력하여 Angular 애플리케이션을 실행합니다. 웹 브라우저에서 localhost:4200으로 엽니다.
   
9. Click me 버튼을 클릭합니다. 자식 구성 요소는 자식 구성 요소에서 부모 구성 요소로 데이터를 보냅니다.
   

출력 데코레이터를 사용하여 다른 구성 요소로 데이터 보내기

입력 데코레이터 또는 구성 요소 데코레이터와 같이 Angular에서 사용할 수 있는 다른 데코레이터가 있습니다. Angular에서 다른 데코레이터를 사용하여 코드를 단순화하는 방법에 대해 자세히 알아볼 수 있습니다.