Angular Component Communication (부모-자식 컴포넌트 간 바인딩)

# 부모 컴포넌트의 내부 Data를 자식 컴포넌트로 전달하는 방법

부모 컴포넌트 템플릿 상에서, 자식 컴포넌트의 속성에 변경을 가하고자 하는 경우

부모컴포넌트.html 상에서 내부 Data를 자식 컴포넌트 속성에 덮어씌워서, 표시하려는 경우

주로 데이터를 보여주고, 표시하려는 용도로 사용된다.

3가지 정도의 방법이 존재한다.

 

1. 자식컴포넌트.ts 상에서, 속성 앞에 @Input() decorator를 선언

자식 컴포넌트 상에서 관련 속성의 @Input() 데코레이션을 붙여줌으로써, 자식 컴포넌트의 속성값 변경을 허용해준다.

기존 HTML 태그처럼 자식 컴포넌트 Tag에도 해당 속성을 만들어주는 것을 의미한다.

 

//todo.component.ts 中

@Input() todo:Todo;

@Input() newText:string;

 

//todos.component.html 中

//기본 html 상에서 바인딩(컴포넌트 Data ->(덮어씌우기)-> DOM 속성)

//name, checked 속성을 가짐

<input type="checkbox" [checked]="todo.done" name=""/>

 

//부모-자식간 바인딩(부모 컴포넌트 Data ->(덮어씌우기)-> 자식 컴포넌트 속성)

//todo라는 Input Argument가 생성

<app-todo [todo]="todo"> </app-todo>

 

//부모 컴포넌트 todo 속성값을 자식 컴포넌트 todo 속성에 입력하여, 보여준다.

2. ES6 setter 사용가능

3. @ViewChild()를 사용 - decorator

 

# 자식 컴포넌트 상에서 부모 컴포넌트의 내부 Data를 변경하는 방법

자식 컴포넌트.ts 상에서, Output 속성으로, EventEmitter 객체를 새로 생성하고, 객체.emit(param) 함수를 호출함으로 가능하다.

EventEmitter 객체의 이름이 자식 컴포넌트의 새로운 Event 속성명이 된다.

 

1. @Output()을 사용

- 자식 컴포넌트.html 상에서, 이벤트 Binding(기본 입력 이벤트(click, hover) <> 자식 컴포넌트 내 메소드)

// add-todo.component.html 中

<button (click)="addTodo(newText)">Add</button>

 

2. EventEmitter를 사용하여, 부모에게 이벤트 전달

- 자식 컴포넌트.ts 상의 Output EventEmiiter 객체 선언

// add-todo.component.ts 中

@Output() onTodoAdded = new Event Emitter();

addTodo(newText:string){

 this.onTodoAdded.emit(newText); //부모 컴포넌트의 내부 Data 변경이 필요한 시점에, 호출

}

 

3. 부모 컨포넌트는 $event로 이벤트의 데이터를 전달 받음

- 부모 컴포넌트.html 상에서, 이벤트 Binding(EventEmitter로 정의된 속성명 <> 부모 컴포넌트 내 메소드)

//todos.component.html 中

<app-todo (onTodoAdded)="addTodo($event)"></app-todo>

 

//todos.component.ts 中

addTodo(text: string){

 this.todos.push({done:false, text: text});

}

 

4. 자식이 부모 컴포넌트를 직접 주입받을 수 있음

강력한 의존관계가 생성되기 때문에, 반드시 부모-자식이 같이 쓰이는 경우에만 사용

 

# Model 클래스 생성하기

Model을 사용하는 방법은, 인라인 방식과 따로 Model 파일을 생성하는 방식이 존재한다.

Model 클래스를 생성 및 선언할 경우, todo라는 폴더 안의 컴포넌트들에서 참조한다면, todo 폴더 내

share라는 폴더 생성 후, 아래의 명령어로 Model을 생성한다.

- cd todo/share

- ng g class todo.model

- Todo.Model이라고 표시 되는데, Todo로 변경할 것

export class Todo {

   done:boolean; //;으로 끝내야 한다. inline 방식은 ,로 구분

   text:string;

}

# 외부에서 Model 클래스 참조하기

Model 클래스를 다른 모듈 또는 컴포넌트에서 사용해야할 경우, 아래와 같이 import 선언이 필요하다.

import { Todo } from '../../share/todo.model';