Anguler Component(3) - 컴포넌트 통신(부모 ->자식 단방향,양방향)

편의성의 위해 반말로 하겠습니다.

 

오늘은 부모, 자식 간의  단방향.양방향 컴포넌트 통신을 할 예정입니다.

 

 

child, parent, grand 3개의 컴포넌트를 생성한다.

 

 

 

app-> grand 

grand -> parent

parent -> child  이 순으로 템플릿을 호출한다

 

 

 

 

부모 자식 컴퍼넌트 통신

먼저 child ts, html을 이렇게 작성한다.

나이와 이름을 받을 Input을 만들고 이를 html에 표현하는 표현식이다

 

 

그 다음 parent ts, html을 이렇게 작성한다.

html에서 보이는 name과 age는 child에서 만든 Input 이름이다.

문자열을 전송 할 때는 []을 생략하고, 변수를 전송할 때는 []를 같이 사용해야한다.

 

이렇게 나온다면 성공한 것이다.

 

이렇게 부모->자식으로 가는 단방향 통신이 끝났다.

 

이어서 양방향 통신을 해볼 예정이다.

 

child.ts를 이렇게 수정한다.

output을 선언하고 3초에 한번 next를 emit한다

 

 

 

parent ts, html을 이렇게 수정한다

child에 있는 next가 호출되면, parentnext 함수를 호출한다.

호출을 하면 나이가 1씩 증가한다.

 

이렇게 되면 3초에 한번 나이가 1씩 증가해야한다.

 

양방향 통신이 잘 되었나 확인을 위해 parent html에 이렇게 표현식을 추가한다.

 

확인을 해보면 양방향 통신이 잘 된것을 확인 할 수 있다.