🅰️ Angular 컴포넌트 간 통신 전략 및 실무 기법

// 1단계: 프로젝트 생성
ng new component-communication-tutorial --routing

// app.component.html
<div>
  <app-child></app-child>
</div>

// child.component.ts
export class ChildComponent {
  @Output() customEvent = new EventEmitter<string>();

  sendData() {
    this.customEvent.emit('데이터 전달');
  }
}

// parent.component.ts
@ViewChild(ChildComponent) child!: ChildComponent;

ngAfterViewInit() {
  this.child.customEvent.subscribe(msg => {
    console.log('수신한 메시지:', msg);
  });
}

// 2단계: 서비스 통신
@Injectable({ providedIn: 'root' })
class SharedService {
  private dataSource = new ReplaySubject<string>(1);

  getData(): Observable<string> {
    return this.dataSource.asObservable();
  }

  updateData(value: string) {
    this.dataSource.next(value);
  }
}

// 3단계: 라우터 파라미터 전달
const routes: Routes = [
  { path: 'detail/:id', component: DetailComponent }
];

// detail.component.ts
constructor(private route: ActivatedRoute) {
  this.route.params.subscribe(params => {
    console.log('전달된 ID:', params['id']);
  });
}