@Input 및 @Output을 사용한 Angular 구성 요소 상호 작용

여러 번 부모 구성 요소로 데이터를 받거나 보내야 하는 구성 요소가 있습니다.

다음 예를 그리면 앱 구성 요소와 경고 구성 요소가 있습니다.



경보 구성요소는 표시할 메시지를 수신해야 합니다.
버튼을 클릭하면 부모는 무슨 일이 일어났는지 알아야 합니다.

이를 위해 @Input을 사용하여 수신하고 @Output을 사용하여 변경 사항이나 조치를 내보낼 수 있습니다.

구성 요소 설정

우리는 이전에 사용했던 앱을 사용할 것입니다. GitHub에서 스타터를 찾을 수 있습니다.

알림 구성 요소를 추가하고 터미널을 열고 프로젝트 폴더에서 이 생성 명령을 실행해 보겠습니다.

ng generate component alert

이제 이 구성 요소를 welcome.component.html에 추가할 수 있습니다.

<h1>Welcome page</h1>
<hr />
<app-alert></app-alert>

멋지네요. 앱을 실행할 때 이를 확인해야 합니다.



하지만 이 구성 요소에 대한 데이터는 어떻게 얻습니까?

@Input 데코레이터에 대한 각도 이해

alert 구성 요소에 간단한 메시지를 보내고 싶다고 가정해 보겠습니다. @Input 데코레이터를 사용하는 곳입니다.

먼저 이 선언을 alert.component.ts 에 추가해야 합니다.

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

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
  @Input() message: string;

  constructor() { }

  ngOnInit(): void {
  }

}

이 메시지를 HTML에도 추가해 보겠습니다.

<h1>Alert: {{ message }}</h1>

흠, 이제 welcome.component.ts에서 이 메시지를 설정하는 방법을 찾아야 합니다.

거기에 보낼 메시지를 정의합시다.

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

  messageToSend: string = 'This is the message';

  constructor() { }

  ngOnInit(): void {
  }

}

그런 다음 welcome.component.html를 열면 이 메시지를 보낼 수 있습니다.

<app-alert [message]="messageToSend"></app-alert>

그런 다음 앱을 실행하면 다음 결과가 표시됩니다.

@Output 데코레이터 사용

자식 구성 요소로 데이터를 보내는 것은 멋진 일이지만 작업을 다시 수신하려면 어떻게 해야 할까요?

이것은 @Output 데코레이터가 작동하는 곳입니다. 이것은 EventEmitter를 사용하여 변경 사항을 알릴 수 있습니다.
alert.component.ts 에서 다음과 같이 변경합니다.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
  @Input() message: string;
  @Output() messageBack = new EventEmitter<string>();

  constructor() { }

  ngOnInit(): void {
  }

  sendMessageBack(message: string) {
    this.messageBack.emit(message);
  }

}

여기에서 @Output을 EventEmitter로 설정하고 있음을 알 수 있습니다.

그런 다음 문자열을 허용하는 sendMessageBack라는 새 함수를 추가했습니다.
일단 호출되면 메시지를 출력으로 내보냅니다.

그런 다음 이를 다음과 같은 방식으로 alert.component.html에 추가할 수 있습니다.

<h1>Alert: {{ message }}</h1>
<br />
<button (click)="sendMessageBack('Secret message here')">Send a message back</button>

이제 환영 구성 요소가 이 메시지를 받을 수 있는지 확인해야 합니다.
welcome.component.html 를 변경해 보겠습니다.

<h1>Welcome page</h1>
<hr />
<app-alert [message]="messageToSend" (messageBack)="getMessage($event)"></app-alert>

여기에서 getMessage라는 이벤트를 호출하도록 @Output(messageBack)을 설정하고 있음을 알 수 있습니다.
welcome.component.ts 에서 이 getMessage 함수를 생성해 보겠습니다.

getMessage(event) {
    this.messageToSend = event;
}

우리는 우리가 받은 메시지를 보낼 메시지를 설정할 것입니다.

이제 앱을 실행하고 버튼을 클릭하면 메시지가 변경된 것을 볼 수 있습니다!



다음GitHub 프로젝트에서 오늘의 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나