컴포넌트 상호 작용

Angular2 스터디 발표 자료
컴포넌트간 상호 작용방법을 학습
- 중첩 컴포넌트
- Input 장식자를 이용한 데이터 전달
- Inputs 속성을 이용한 데이터 전달
- EventEmitter를 이용한 데이터 전달

1. 중첩 컴포넌트

• 한개의 컴포넌트가 여러개의 컴포넌트를 포함하고 있으면 중첩 컴포넌트라 함
• 깊이에 따라 부모, 자식, 손자 … 이라 칭함

2. 중첩 컴포넌트 생성

• 손자컴포넌트 grandson.component.ts 생성
• 자식컴포넌트 child.component.ts 생성
• 부모컴포넌트 parent.component.ts 생성
• 모듈 등록
• 적용 및 확인

1. 손자 컴포넌트 생성
> /hello-ng2/src/app/grandson.component.ts

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

@Component({
  selector : 'nested-grandson',
  template : '<div>손자</div>',
  styles : ['div{border: 1px solid; width : 65%; height : 65%;}']
})
export class NestedGrandsonComponent{

}

2. 자식 컴포넌트 생성
> /hello-ng2/src/app/child.component.ts

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

@Component({
  selector : 'nested-child',
  template : '<div>자식<nested-grandson></nested-grandson></div>',
  styles : ['div{border :1px solid; width : 75%; height : 75%;}']
})
export class NestedChildComponent{

}

3. 부모 컴포넌트 생성
> /hello-ng2/src/app/parent.component.ts

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

@Component({
  selector : 'nested-parent',
  template : '<div>부모<nested-child></nested-child></div>',
  styles : ['div{border: 1px solid; width : 85%; height : 85%;}']
})
export class NestedParentComponent{

}

4. 모듈 등록
> /hello-ng2/src/app/app.module.ts
...
import { NestedParentComponent } from './parent.component';
import { NestedChildComponent } from './Child.component';
import { NestedGrandsonComponent } from './grandson.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent,
    NestedParentComponent,
    NestedChildComponent,
    NestedGrandsonComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent,HelloComponent,NestedParentComponent]
  ...

5. 적용 및 확인
> ng serve
http://localhost:4200

3. Input 장식자를 이용한 값 받기

• @Input() 장식자를 사용하기 위해선 core에 있는 Input을 임포트 해야함.
• 부모 컴포넌트에서 자식 컴포넌트에게 값을 보내면 자식 컴포넌트는 @Input() 장식자를 이용하여 값을 받음.
• @Input() 장식자는 외부에서 값을 받아올때 사용.
• 부모 컴포넌트에서 자식 컴포넌트에 값을 전달 할 때는 [자식 컴포넌트에 정의된 변수명]=’전달할 값이 저장된 변수 명’ 의 형식으로 사용

4. Input 장식자 실습

• 자식 컴포넌트 data-child.component.ts 생성 및 @Input 장식자를 이용하여 값을 받도록 class확장
• 부모 컴포넌트data-parent.component.ts 생성 및 자식 장식자에 값 전달
• 모듈 등록
• 적용 및 확인

1. 자식 컴포넌트 생성

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

@Component({
  selector : 'data-child',
  template : '<div>parentName : {{name}} </div>'
})
export class DataChild{
  @Input() name:string;
}

2. 부모 컴포넌트 생성

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

@Component({
  selector : 'data-parent',
  template : '<div>data @input : <data-child [name]="parentName"></data-child> </div>'
})
export class DataParent{
  parentName = "부모님이시다.";
}

3. 모듈 등록
...
import { DataParent } from './data-parent.component';
import { DataChild } from './data-child.component';

@NgModule({
  declarations: [
  ...
    DataParent,
    DataChild
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [..., DataParent]

4. 적용 및 확인
> ng serve
http://localhost:4200

• 더 자세한 사항은 P.99 참조

5. inputs 속성을 이용하여 값 받기

• 다른 모든것은 @Input() 장식자를 이용할 때와 같다.
• 다른점은 값을 받는 자식 컴포넌트의 @Component 설정에 inputs : [‘값을 받을 변수명1’,’변수명2’…] 의 형식으로 받으면 된다.

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

@Component({
  selector : 'data-child',
  template : '<div>parentName : {{name}} </div><div> inputs1 : {{inputs1}}, inputs2 : {{inputs2}} </div>',
  inputs : ['inputs1','inputs2']
})
export class DataChild{
  @Input() name:string;
}

6. EventEmitter 를 이용한 값 전달

• 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼때는 @Output() 장식자로 선언한 변수를 EventEmitter 로 초기화한다.
• 부모에게 보낼 시점에 EventEmitter로 초기화한 변수의 emit() 메서드를 사용해 부모 컴포넌트로 이벤트를 전달한다.
• core에 있는 Output, EventEmitter를 임포트 해야한다.

7. EventEmitter 실습

• 버튼 클릭시 랜덤 숫자를 부모에게 전달하는 자식 컴포넌트 event-emitter-child.component.ts 생성.
• 자식 컴포넌트에서 발생한 숫자를 받아 표시할 부모 컴포넌트event-emitter-parent.component.ts 생성.
• 모듈 등록
• 적용 및 확인

1. 자식 컴포넌트 생성

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector : 'event-child',
  template : '<button (click)="sendNumber()">전달</button>'
})
export class EventEmitterChild{
  @Output() outEventEmitter: EventEmitter<number> = new EventEmitter<number>();

  sendNumber(){
    let randNum = Math.floor(Math.random() * 6) + 1;
    this.outEventEmitter.emit(randNum);
  }
}


2. 부모 컴포넌트 생성

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

@Component({
  selector : 'event-parent',
  template : '<div>{{randNum}}<event-child (outEventEmitter)="outEvent($event)"></event-child></div>'
})
export class EventEmitterParent{
  randNum = 0;
  outEvent(randNum:number){
    this.randNum = randNum;
  }
}


3. 모듈 등록
...
import { EventEmitterParent} from './event-emitter-parent.component';
import { EventEmitterChild} from './event-emitter-child.component';

@NgModule({
  declarations: [
  ...
    EventEmitterParent,
    EventEmitterChild
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [...,EventEmitterParent]

4. 적용 및 확인
> ng serve
http://localhost:4200

소스확인