템플릿변수, @ViewChild, @ContentChild를 이용해서 컴포넌트간 통신이 가능하고 각각의 장단점이 있다.
상하위 컴포넌트에 서비스를 의존성주입해서 컴포넌트 인스턴스를 참조하게 하면 간단하게 통신이 가능하다.
하위컴포넌트가 *ngFor로 여러개 인스턴스가 있을때는 위 방법으는 하위인스턴스들의 구분이 되지 않는다.
이런 경우에는 옵저버블 멀티캐스팅을 사용해야 한다.
// 컴포넌트간 통신을위한 Subject생성
private missionAnounceSource = new Subject<string>();
private missionConfirmSource = new Subject<string>();
// 옵저버블객체생성
anounceStream$ = this.missionAnounceSource.asObservable();
confirmStream$ = this.missionConfirmSource.asObservable();
// 서비스가 옵저버블에게 데이터를 방출할 메소드,
anounceMission(mission:string){
this.missionAnounceSource.next(mission);
}
// 서비스가 옵저버블에게 데이터를 방출할 메소드
confirmMisson(misson:string){
this.missionConfirmSource.next(misson);
}옵저버블객체를 만들때 소스데이터없이 만들고 나중에 하위컴포넌트에서 next메소드를 호출하기 때문에 Subject객체를 만든다.
Subject로부터 옵저버블객체를 만든다.
서비스인스턴스는 컴포넌트들이 공유하므로 데이터방출메소드를 만들어 놓으면 된다.
상위컴포넌트에서는 confirmStream$을 구독하고 데이터가 방출되면 로그에 삽입한다.
하위컴포넌트에서는 anounceStream$를 구독하고 데이터가 방출되면 미션제목을 수정하고 버튼을 활성화시킨다.
Subject객체를 활용하면 멀티캐스팅되고 옵저버블객체를 생성하고 next메소드로 데이터방출도 가능하다.
