AngularJs 2 - Multiple Components

이전에 만들었던 app.component의 이름을 변경하고, code title list와 code content를 분리하여 독립된 component로 만들어보자.

app.component.ts -> code.component.ts

app.component.html -> code.component.html

<code.component.html>

위 코드에서 <code-titles>,<code-content>라는 태그는 표준 HTML 태그가 아니므로, 브라우저는 이른 조용히 무시할 것이다. AngularJs도 역시 마찬가지.

이를 처리하도록 하려면 이를 위한 component가 있다는 것을 알려주어야 한다.

위 내용은 code.component.ts의 내용이며, 4번째 줄의 

directives : [CodeTitlesComponent, CodeContentComponent]

부분이 그 역할을 한다. 이제 저 콤포넌트들을 만들어보자.

<code.titles.component.ts>

예상할 수 있듯이 5번째 줄에 "code-titles"라는 태그를 처리하는 콤포넌트라 되어있다. @Input 이라는 데코레이터가 있는데 이는 값이 전달되어 진다는 것을 표시한다. 이전에 보았던 데이터 바인딩에 의해서.(2016/03/05 - [프로그래밍/AngularJs] - AngularJs 2 - 데이터 바인딩 - One Way) 이전글 에는 @Input을 사용한 내용이 없다. 지금 것과 다른 점은 이전 글의 class.selected라는 값은 브라우저가 미리 알고있는 변수라는 것이고, 위의 codes라는 값은 브라우저가 미리 알고있는 표준이 아니므로 우리가 CodeTitlesComponent에 변수를 선언하고 @Input 을 사용한 것이다.

전달 받을 CodeTitlesComponent는 준비가 되었고 이를 전달해 주도록 code.component.html를 바꾸어야한다.

<code.component.html>

selected라는 바인딩들도 볼 수있다. 이는 선택된 code를 의미한다. 실제 선택은 code.titles.component.html에서 일어날 것이고, 사실 제일 먼저 선택된 값을 아는 Component이기도 하지만, CodeContentComponent 역시 선택된 값을 알아야 한다. 그런데 둘은 상하위 계층 관계가 아니므로 직접 넘겨 주지 못하므로 직접 넘겨줄 수 있는 CodeComponent에 저장하고 이를 전달해 주도록 만들자.

click 이벤트를 처리해야 할 곳은 CodeTitlesComponent이다.

<code.titles.component.html>

click 이벤트를 onSelect 메소드에서 처리하도록 되어있다. 위에서 만든 code.titles.component.ts에 이를 추가한다.

<code.titles.component.ts>

onSelect 메소드를 보면 앞서 얘기했듯이 자신의 필드로 값을 저장할 수있지만 다른 곳에서 사용할 수있도록 상위 객체로 값을 전달하기 위해 이벤트를 발생시킨다. 이를 해주는 코드가 18번째 줄이고 이는 15번째줄의 @Output() 데코레이팅된 codeSelect라는 이벤트를 발생시킨다.

발생된 이벤트를 처리할 부분을 완성해보자.

<code.component.html>

codeSelect라는 이벤트 처리 메소드로 onSelect($event)를 등록해 두었다.

<code.component.ts>

codeSelect 이벤트 역시 표준이벤트가 아니므로 이벤트 리스너를 등록해 두어야 한다.

이를 수행해 주는 것이 20번째 줄의 @HostListener이다.

이제 신경써야 할 이벤트 및 값들이 제대로 사용될 준비는 다 되었으니, CodeContentComponent는 간단히 코드만 작성한다.

<code.content.component,html>

<code.content.component.ts>