[Angular2] @Input

Angular2에는 @Input이라는게 있는데 외부에서 Parameter(HTML기준으로는 attribute)를 넘겨 받아, 값으로 활용할 때 사용한다.

아래 예를 한 번 보자.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

import { Component, Input } from '@angular/core';   @Component({     selector: 'input-div',     template: `<h1>{{title}}</h1><br>` }) export class InputDivComponent  {     @Input() title: string;     // title변수는 외부로 부터 받아서 활용한다.                                      // (이름이 너무 긴 경우 @Input('a')와 같이 argument로 alias name을 넘겨서 활용할 수도 있다.) }   // 위에 있는 컴포넌트를 아래 추가할 두개의 컴포넌트에서 동일하게 활용할 것이므로, 변수로 선언함. var inputDivParentTemplate = `<input-div title="{{title}}"></input-div>`;       @Component({     selector: 'input-div-a',     template: inputDivParentTemplate }) export class InputDivAComponent {     title: string = "A"; }   @Component({     selector: 'input-div-b',     template: inputDivParentTemplate }) export class InputDivBComponent {     title: string = "B"; }

View에서는 아래와 같이 태그만 가져다가 쓰면, Component에 명시한 Template대로 태그가 그려진다.

?

1 2	<input-div-a>loading...</input-div-a> <input-div-b>loading..</input-div-b>

Angular2를 처음 접해본 입장에서는 왜 굳이 한 번만 사용할 Component를 두개나 추가로 만들어서 사용하는 지 의문이 들거고..

InputDivComponent 하나만 작성하고, 아래와 같이 html을 작성할 수도 있다.

?

1 2	<input-div title="A">loading...</input-div> <input-div title="B">loading..</input-div>

실제로 위와 같이 만들어서 돌려보면 loading...만 나올 것이다.

Angular2가 동작하는 매커니즘 상, 최초 초기화시에는 Component를 미리 선언하여 그대로 활용만 하는 것 같고,

HTML단에서 Component에 명시한 selector를 직접 활용하는 것은 별도의 설정 없이는 불가능하거나 Angular2 매커니즘상 허용하지 않는 것 같다.