[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 6. Component Communication

[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 6. Component Communication

"5." 시간에 만든 names를 실제로 person으로 만들어 보자

src/app 에서 우클릭 새폴더

이름은 person

생성된 person 폴더에서 다시 우클릭 새 파일 파일명 person.ts

그리고 내용은

export class Person {

    name: string;

}

export const PEOPLE = [{name: "Twoway"}, {name: "Greeting"}, {name: "JSON"}, {name: "Angular"}, {name: "Ionic"}];

그 다음은

app/greeting.component.ts에서 names: 줄을 주석 처리하고

app/greeting.component.html 역시 출력되는 ngfor문을 주석 처리한다

그 다음 app/twoway/twoway.component.ts로 돌아와서 people을 import하고

people에 넣도록 한다

2번째줄

import { PEOPLE } from '../person/person';

과

12번째줄

people = PEOPLE;

을 추가했다

그 다음 출력을 하기위해

app/twoway/twoway.component.ts로 가서

<div>

  <ul>

    <li *ngFor="let person of people">{{person.name}}</li>

  </ul>

</div>

를 작성하도록 하자

그러면?

로 잘나온다

person.ts의 PEOPLE을 twoway 에서 import 해서 twoway.component.html을 통해 출력이 되었다

그러면 다시 greeting으로 가서 app/greeting/greeting.component.ts

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

import { Person } from '../person/person';

@Input[] person: Person;

수정 및 추가 하고

app/greeting/greeting.component.html에서

기존 작성된 내용을 위 처럼 바꾸도록 한다

ngFor를 twoway에서 할거니까 greeting은 출력만 해준다

그 다음 app/twoway/twoway.component.html로 건너와서

<app-greeting *ngFor="let person of people" [person]="person"></app-greeting>

라고 작성하고 나머지는 모두 주석 처리하자

자! 그럼 설명을 해보도록 하자

people 배열에서 person을 불러오는데 그 person과 people은 app-greeting에 있는 그것을 사용한다

그러면 greeting으로 넘어가서 @Input 데코레이터가 person을 정의하기를 Person으로 정의하고 이 Person은 ../person/person에서 import해오는데

그 Person은 class로 name이라는 변수를 string값으로 가진다

마지막으로 greeting.component.html 에서 그 person의 name값을 {{person.name}}으로 불러온다

{{person.name}}은 ngFor로 인해 여러번 불러온다

가 우리가 오늘 진행한 작업이다

설명해놓고도 뭔소린지 싶다;;; 이해 하는사람만 하고 그냥 넘어가도록 하자 이해는 나중에 자연스레 된다

자 그럼 다음단계로 넘어가서 다이나믹하게 추가 되는 장면을 인도하고 목격해보도록 하자

먼저 app/twoway/twoway.component.html에서 

<input type="text" [(ngModel)]="personName">

<button (click)="addPerson(personName)">Add</button>

로 입력을 받고 액션을 취할 버튼을 추가한다

그 다음 personName, addPerson 을 정의하기 위해 app/twoway/twoway.component.ts로 가자

2번째 줄 수정

import { PEOPLE, Person } from '../person/person';

13번째 줄 추가

personName: Person;

21~23번째 줄 추가

  addPerson(personName) {

    this.people.push({name: personName})

  }

해주면 끝

그러면?

이렇게 나온다.. 응? 마지막 Hello 뭐지?

twoway.component.html

greeting.component.html을 뒤지면 영향주는것이 없다

app.component.html을 갔더니.. 아래와 같이 되어있었다

greeting을 주석하고 저장하면 마지막 Hello는 사라지고

만들어진 text박스에 아무글이나 적고 add해보도록 하자

잘 된다면 축하하고

안된다면 파일 > 모두저장 을 해보고 그래도 안된다면 어딘가에 오타가 있을테니 잘 살펴보고 오도록 한다

오늘은 여기까지