앵귤러2 컴포넌트 사이 값 전달(@Input 장식자, inputs속성)
- 컴포넌트 사이(부모, 자식) 의 값을 전달하는 방법에 세가지가 있다
- @Input 장식자, inputs 속성, EventEmitter
- @Input 장식자와 inputs 속성은 부모 -> 자식으로 값을 전달
- EventEmitter 는 자식 -> 부모로 값을 전달
1. @Input장식자
- 외부에서 전달된 값을 받기 위해 사용하는 장식자
- 부모 컴포넌트에서 자식 컴포넌트로 값을 전달 한다
1) parant.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 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
1 2 3 4 5 | <div>
parent
<app-child [name1]="fruit1" [name2]="fruit2()" [name3]="fruit3" [name4]="1+1"
[name5]="fruit5" [name6]="fruit6"></app-child>
</div>
|
- 자식 컴포넌트 태그에 name 속성에 값을 전달
3) child.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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
1 2 3 4 5 6 7 8 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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
1 2 3 4 | <div>
parent
<app-child [name1]="name1" [name2]="name2" ></app-child>
</div>
|
- name 속성을 전달한다.
3) child.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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
1 2 3 4 5 6 | <div>
parent<br>
clickCnt : {{cntClick}}<br>
childStatus:{{active}}
<app-child (outputProperty)="outputEvent($event)"></app-child>
</div>
|
- 부모 컴포넌트의 값을 자식 컴포넌트가 값을 받을 때는 @Output 장식자로 선언한 변수와 동일한 속성명으로 받는다
