기본 Angular 앱 시작하기 (3)

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

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

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

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

자식 구성 요소에 데이터 전달

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

이 섹션에서는 상위 구성 요소인 ProductListComponent에서 데이터를 받을 수 있는 하위 구성 요소 ProductAlertsComponent를 만드는 방법을 설명합니다.

1.Angular Generator를 사용하여 product-alerts라는 새 구성 요소 생성

튜토리얼의 지시대로 product-alerts 컴퍼넌트를 생성합니다.
그러면 자동으로 다음 세 개의 파일이 생성됩니다.

product-alerts.component.ts
product-alerts.component.html
product-alerts.component.css

2. 먼저 @angular/core에서 Input 가져오기

product-alerts.component.ts

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

product-alerts.component.ts 에, 위와 같이 Input 를 임포트하기 위한 기술을 추가합니다.

3.product라는 속성을 @Input () 데코레이터로 정의

product-alerts.component.ts

export class ProductAlertsComponent implements OnInit {
  @Input() product;
  constructor() { }

  ngOnInit() {
  }

}

위와 같이 @Input () product; 라고 하는 기술을 추가합니다.

이 @Input() 데코레이터는 속성 값이 구성 요소의 부모인 ProductListComponent에서 전달됨을 나타냅니다.

4.product-alerts.component.html에 button 태그 작성

product-alerts.component.html

<p *ngIf="product.price > 700">
  <button>Notify Me</button>
</p>

product-alerts.component.html을 열고 기본적으로 작성된 내용을 위와 같이 다시 작성합니다.

5.product-list.component.html에 선택기 추가

ProductListComponent의 자식으로 ProductAlertsComponent를 표시하려면 product-list.component.html에 선택기를 추가하십시오.

product-list.component.html

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

<app-product-alerts
  [product]="product">
</app-product-alerts>

(속성 바인딩되는 것을 사용하고 있습니다. 이 [] 의 사용법이군요.)

여기까지 하면 아래 그림과 같이 Notify Me라는 버튼이 표시됩니다.

이 시점에서 아직 Notify Me를 클릭해도 아무 일도 일어나지 않습니다.

다음 기사 : [Angular] 「기본적인 Angular 앱을 시작한다」를 해 본다(4)부모 컴퍼넌트에 데이터를 건네준다