자식에게 데이터를 받아서 startTime함수를 호출해 아래처럼 데이터를 받았다.

<div class = 'title'>

<div class = 'display'>

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

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

</div>

</div>

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

@Component({

  selector: 'app-section',

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

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

})

export class SectionComponent implements OnInit {

  present='welcome';

  constructor() { }

  startTime(childData){

    this.present=childData;

  }

  ngOnInit(): void {

  }

}

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

받은 데이터를 자식에게 전달해보자.

일단 present변수에 값이 있으니 부모 html에서 이렇게 해준다.

<div class = 'title'>

<div class = 'display'>

    <app-time-display [inputData]='present'></app-time-display>

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

</div>

</div>

inputData라는 변수에 present를 받는다는 의미.

그럼 inputData를 만들러 가자.(자식에서)

inputData를 만드는데 줄때는 @Output을 하였고,

지금은 받는것이니 @Input()을 사용한다.(데코레이터)

그럼 시작 버튼(데이터를 처음에 준 자식에 있는 버튼)을 클릭하지 않을때가 첫페이지 이므로,

ngOnChanges함수엔 welcome이 들어가있을 것이다.(present 초기값)

여기서 ngOnChanges 는 Input데이터가 바뀔때마다 작동하는것임.

그리고 버튼을 누르면 welcome에서 change!로 바뀐다.

다시 누르면 어차피 change!니까 ngOnChanges 함수는 호출이 되지 않는다.

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

@Component({

  selector: 'app-time-display',

  templateUrl: './time-display.component.html',

  styleUrls: ['./time-display.component.scss']

})

export class TimeDisplayComponent implements OnInit {

  @Input()

  inputData:string;

  test=0;

  constructor() {

    setInterval(() => {

      this.test++;

    }, 1000)

  }

  ngOnChanges(changes: SimpleChanges){

    console.log(changes);

  }

  ngOnInit(): void {

  }

}

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

일단 클릭을 하면 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 {

  }

}

컴포넌트

export class ButtonsComponent implements OnInit {

  constructor() { }

  test($event:MouseEvent){

    console.log($event);

  }

  ngOnInit(): void {

  }

}

HTML

<p>

    <button class='startBtn' (click)='test($event)'>시작</button>

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

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

</p>

추론을 위해 가드친다.

import { isParameter } from "typescript"

interface Person{

    name:string;

    age:number;

}

interface Car{

    brand:string;

    wheel:number;

}

function isPerson(param:any):param is Person{

    return isParameter.name !==undefined;

}

function hello(obj:Person |Car){

    if(isPerson(obj)){

        console.log(obj.name);

        console.log(obj.age);

    }else{

        console.log(obj.brand);

        console.log(obj.wheel);

    }

}

function print(target:any,methodName:string, paramIndex:number){

    console.log(target);

    console.log(methodName);

    console.log(paramIndex);

}

class Person {

    private _name: string;

    private _age: number;

    constructor(name: string, @print age: number) {

        this._name = name;

        this._age = age;

    }

    hello(@print message:string){

        console.log(message);

    }

}

function writable(canBeWritable:boolean){

    return function(target:any, propName:string):any{

        console.log(target);

        console.log(propName);

        return{

            writable:canBeWritable,

        };

    }

}

class Person{

    @writable(false)

    name:string = 'kim';

    constructor(){

        console.log('new Person()');

    }

}

const p= new Person();

console.log(p.name);

function editable(canBeEditable : boolean){

    return function(target:any, propName:string, description:PropertyDescriptor){

        console.log(target);

        console.log(propName);

        console.log(description);

        description.writable = canBeEditable;

    }

}

class Person{

    constructor(){

        console.log('new Person()');

    }

    @editable(false)

    hello(){

        console.log('hello');

    }

}

const p= new Person();

p.hello();

p.hello=function(){

    console.log('world');

}

p.hello();

프로퍼티에 적용

function firstDecorator(target, name){

    console.log('firstDecorator');

    console.log(target,name);

}

class Person{

    @firstDecorator

    job:'dancer';

    @firstDecorator

    age:30;

}

const p=new Person();

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

인스턴스 생성전에 decorator 전부 발동됨(미리 준비)

객체 생성문 없어도 준비됨.

인스턴스 생성하면 발동된것을 박는거임

function firstDecorator(param){

    console.log('factory');

    return function(target,name){

        console.log('decorator');

    }

}

class SomeClass{

    @firstDecorator(123)

    prop='a';

}

console.log('인스턴스 생성 전');

console.log(new SomeClass());