[Angularjs2] 앵귤러2 컴포넌트 사이 값 전달(@Input 장식자, inputs속성)

앵귤러2 컴포넌트 사이 값 전달(@Input 장식자, inputs속성)

- 컴포넌트 사이(부모, 자식) 의 값을 전달하는 방법에 세가지가 있다

- @Input 장식자, inputs 속성, EventEmitter

- @Input 장식자와 inputs 속성은 부모 -> 자식으로 값을 전달

- EventEmitter 는 자식 -> 부모로 값을 전달

1. @Input장식자

- 외부에서 전달된 값을 받기 위해 사용하는 장식자

- 부모 컴포넌트에서 자식 컴포넌트로 값을 전달 한다

1) parant.ts

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.css'] }) export class ParentComponent implements OnInit { constructor() { } ngOnInit() { } fruit1="apple"; fruit2(){ return "pale"; } fruit3 = ['strawberry','grape']; static fruit5="watermelon"; get fruit6(){ return ParentComponent.fruit5; } }

- 부모 컴포넌트에 넘겨줄 값을 선언한다.

2) parent.html

<div> parent <app-child [name1]="fruit1" [name2]="fruit2()" [name3]="fruit3" [name4]="1+1" [name5]="fruit5" [name6]="fruit6"></app-child> </div>

-  자식 컴포넌트 태그에 name 속성에 값을 전달

3) child.ts

import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit { constructor() { } ngOnInit() { } @Input() name1: string; @Input() name2: string; @Input() name3: string[]; @Input() name4: number; @Input() name5: string; @Input() name6: string; }

- @Input 장식자를 이용하여 값을 받는다

4) child.html

<div> name1:{{name1}}<br> name2:{{name2}}<br> name3:{{name3}}<br> name4:{{name4}}<br> name5:{{name5}}<br> name6:{{name6}} </div>

2. inputs 속성

- 컴포넌트 장식자 설정의 inputs 속성을 통해서도 값을 받는 것이 가능하다

- @Input  장식자와 다르게 @Component 장식자 내부에 inputs 속성을 추가한다.

1) parent.ts

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.css'] }) export class ParentComponent implements OnInit { ngOnInit(){ } name1 = "apple"; name2 = "banana"; }

2) parent.html

<div> parent <app-child [name1]="name1" [name2]="name2" ></app-child> </div>

- name 속성을 전달한다.

3) child.ts

import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'], inputs:['name1','name2'] }) export class ChildComponent implements OnInit { ngOnInit(){ } name1: string; name2: string; }

-@Component 에 inputs 속성을 추가하여 값을 받는다.

3. EventEmitter

- 자식 컴포넌트에서 부모 컴포넌트로 값을 전달 할때 사용한다.

- @Output 장식자로 선언한 변수를 EventEmitter 로 초기화한다. 이후 emit()을 사용하여 부모로 이벤트 전달한다.

1) child.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit { ngOnInit(){ } active = false; @Output() outputProperty = new EventEmitter<boolean>(); updateParent(active: boolean){ this.active = !active; this.outputProperty.emit(this.active); } }

- new EventEmitter<boolean> , EventEmitter 객체의 자료형은 boolean을 선언했다.

- boolean 선언으로 emit()의 값을 넘겨줄 때 boolean 으로 넘어가며 받는 컴포넌트(부모)도 동일하게 선언해야 한다

- emit() 를 통해 부모 컴포넌트에 값 전달

- this.outputProperty.emit(this.active)

2) parent.ts

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.css'] }) export class ParentComponent implements OnInit { ngOnInit(){ } cntClick = 0; active = false; outputEvent(active: boolean){ this.cntClick++; this.active = active //자식에게 받은값 } }

3) parent.html

<div> parent<br> clickCnt : {{cntClick}}<br> childStatus:{{active}} <app-child (outputProperty)="outputEvent($event)"></app-child> </div>

- 부모 컴포넌트의 값을 자식 컴포넌트가 값을 받을 때는 @Output 장식자로 선언한 변수와 동일한 속성명으로 받는다