Component Communication

angular는 컴포넌트 형식이라 모든 부분이 컴포넌트로 이루어져있다.

그런 컴포넌트 끼리 데이터를 주고받을 때 사용하는것이 Component Communication이다.

1. @ViewChild와 @ViewChildren

컴포넌트 템플릿에 배치된 자식요소(자식 컴포넌트, 디렉티브, 네이티브 DOM 요소)를 ViewChild라고 한다. 이름에서 알 수 있듯이 @ViewChild는 탐색 조건에 부합하는 1개의 요소를 취득할 수 있고, @ViewChildren는 탐색 조건에 부합하는 여러개의 요소를 한꺼번에 취득할 수 있다.

 

 

@ViewChild(탐색대상 클래스명) 프로퍼티명: 탐색대상 클래스명;

@ViewChildren(탐색대상 클래스명) 프로퍼티명: QueryList<탐색대상 클래스명>;

 

 

 

 

 2. 변수값전달

(왼쪽부터)

1. 부모에서 자식

2. 자식에서 부모

3. 원거리 컴포넌트 절달

부모-> 자식에게

부모 component 

 
<app-child [childMessage]="parentMessage"></app-child> 
 

//[]사이의 명은 은 자식과 일치

자식component

 
@Input() childMessage: string; //받을 값
 

 

 

자식-> 부모에게

 

자식 컴포넌트는 @Output 데코레이터와 함께 선언된 컴포넌트 프로퍼티(출력 프로퍼티)를 EventEmitter 객체로 초기화한다. 그리고 부모 컴포넌트로 상태를 전달하기 위해 emit() 메소드를 사용하여 이벤트를 발생시키면서 상태를 전달한다. 부모 컴포넌트는 자식 컴포넌트가 전달한 상태를 이벤트 바인딩을 통해 접수한다.

 

 

 

 

 

원거리 컴포넌트간 데이터전달

 - 서비스중재자패턴(Service Mediator pattern) 을이용

  => 서비스객체를이용 set get 이용

구글로 키워드를 검색할 때 Component Communication으로 검색하면 많이 나온다

참고 :

https://rangle.io/resources/angular2-component-communication/

https://poiemaweb.com/angular-component-interaction