기본 Angular 앱 시작하기 (4)

[Angular] 「기본적인 Angular 앱을 시작한다」를 해본다(준비)

[Angular] 「기본적인 Angular 앱을 시작한다」를 해본다(1)

[Angular] 「기본적인 Angular 앱을 시작한다」를 해본다(2)

[Angular] 「기본적인 Angular 앱을 시작한다」를 해 본다(3)자식 컴퍼넌트에 데이터를 건네준다

Angular 튜토리얼을 시도하고 있습니다.

상위 구성 요소에 데이터 전달

Angular 공식 페이지 : 상위 구성 요소에 데이터 전달

Notify Me 버튼을 작동하려면 하위 구성 요소가 알리고 상위 구성 요소에 데이터를 전달해야 합니다.

1.product-alerts.component.ts에서 Output 및 EventEmitter 가져오기

product-alerts.component.ts

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

2.notify라는 속성을 @Output () 데코레이터와 EventEmitter()의 인스턴스로 정의

product-alerts.component.ts

export class ProductAlertsComponent {
  @Input() product;
  @Output() notify = new EventEmitter();
}

3.Notify Me 버튼을 이벤트 바인딩으로 업데이트하고 notify.emit() 메서드를 호출합니다.

product-alerts.component.html

<p *ngIf="product.price > 700">
  <button (click)="notify.emit()">Notify Me</button>
</p>

4.product-list.component.ts에서 onNotify() 메서드 정의

product-list.component.ts

export class ProductListComponent {
  products = products;
  test_1 = '製品';

  share() {
    window.alert('The product has been shared!');
  }

  onNotify() {
    window.alert('メッセージ : You will be notified when the product goes on sale');
  }
}

부모의 ProductListComponent는, ProductAlertsComponent가 이벤트를 발생시켰을 때에 동작합니다.

5.product-list.component.html에서 제품 목록 구성 요소의 onNotify() 메서드에 바인딩

product-list.component.html

<button (click)="share()">
  shareボタン
</button>

<app-product-alerts
  [product]="product" 
  (notify)="onNotify()">
</app-product-alerts>

Notify Me 버튼을 클릭하면 아래 그림과 같은 경고가 표시됩니다.


지금까지, 이치오 Angular 튜토리얼의 입문편은 끝입니다.