예제 를 살펴보 겠 습니다 . 이렇게 하 려면 AppChildComponent 에서 단추 클릭 이벤트 를 내 보전 해야 합니다 . @ angular / 코어 에서 EventEmitter 및 출력 을 가져옵니다 . 두 데코레이터 는 서로 관련 된 경우 구성 요소 간 에 작동 합니다 . 예 를 들 어 AppComponent 이 라는 다른 구성 요소 내 에서 ChildComponent 이 라는 구성 요소 를 사용 하 는 경우 서로 관련 이 있 습니다 . 아래 이미지 에서 이 를 확인 할 수 있 으며 , @ Input 데코레이터 로 장식 된 모든 ChildComponent 속성 은 AppComponent 에서 데이터 를 수신 할 수 있 습니다 . 이 방법 을 사용 하 는 방법 의 간단 한 예 로 는 테이블 구성 요소 에 각 고객 을 나타내 는 여러 개 별 행 구성 요소 가 포함 된 고객 및 해당 행이 포함 된 테이블 입니다 . 테이블 구성 요소 는 모든 고객 을 포함 하 는 레코드 집합 을 관리 하 고 개별 고객 의 데이터 를 포함 된 각 행 구성 요소 에 전달 할 수 있 습니다 . 
 이 예제 를 확인 하 십시오 . 여기 에 2 구성 요소 를 만들 었 습니다 , 안녕 하 세요 구성 요소 는 응용 프로그램 구성 요소 내부 에 중첩 . hello 구성 요소 에 는 입력 이 있 으며 이러 한 데코레이터 모두 @ angular / 코어 의 일부 입니다 . @ Output EventEmitter 가 어떻게 더 유용 할 수 있 는지 실시간 예제 를 살펴보 겠 습니다 . AppComponent 이 아래 이미지 와 같이 표 형식 형식 으로 제품 목록 을 렌더링 하 고 있 음 을 고려 하 십시오 : Angular 를 사용 하 는 사람 들 에게 입력 및 출력 데코레이터 는 특히 예 제 코드 를 보 고 연구 할 때 약간 혼란 스럽 습니다 . 이 기사 에서 는 가장 간단 한 방법 으로 설명 하 려고 노력 할 것 입니다 . 그림 1 : @ Component 데코레이터 그림 2 에서 “ 입력 ” 및 “ 출력 ” 속성 을 사용 하 는 구성 요소 : 이 구성 요소 는 ParentComp 에 의해 정의 된 입력 및 출력 을 사용 합니다 . 구성 요소 의 입력 속성 및 출력 이벤트 를 정의 하 는 데 사용 할 수 있 습니다 .