[Angular]자식의 데이터를 부모에게 넘기기

클릭했을때 데이터를 넘겨보자.

 

일단 클릭을 하면 start함수를 호출하게끔 설계.

 

 

<p>

    <button class='startBtn' (click)='start()'>시작</button>

    <button class='stopBtn'>멈춤</button>

    <button class='resetBtn'>리셋</button>

</p>

 

 

===============================================

start 함수를 선언을 해야 사용가능.

@Output()을 (데코레이터) 이용해서 emit에 값을 저장함.

 

@Component({

  selector: 'app-buttons',

  templateUrl: './buttons.component.html',

  styleUrls: ['./buttons.component.scss']

})

export class ButtonsComponent implements OnInit {

  @Output() clickEvent = new EventEmitter();

 

  constructor() { }

  start() {

    this.clickEvent.emit(10);

  }

 

  ngOnInit(): void {

  }

 

}

 

일단 여기까지 하면 값은 저장되었음.

 

이걸 부모 컴포넌트에서 뺼수있음.

 

===============================================

만약 자식인 app-buttons 에서 클릭이벤트 발생하면 startTime이란놈 호출함.

이때 파라미터는 $event 여야함. emit에 저장한놈이 여기로 가는거임.

 

 

<div class = 'title'>

<div class = 'display'>

 

    <app-time-display></app-time-display>

    <app-buttons (clickEvent)='startTime($event)'></app-buttons>

 

</div>

</div>

 

그러고 이제 부모 컴포넌트에서 startTime 함수 만들어서 받으면 됨.

 

======================================================

 

이렇게.

 

 

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

 

@Component({

  selector: 'app-section',

  templateUrl: './section.component.html',

  styleUrls: ['./section.component.scss']

})

export class SectionComponent implements OnInit {

 

  constructor() { }

 

  startTime(num){

    console.log('섹션 컴포넌트가 잘 받았다.')

    console.log(num);

  }

 

  ngOnInit(): void {

  }

 

}