[Angular2] @Input

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

아래 예를 한 번 보자.

import { Component, Input } from '@angular/core';

@Component({
    selector: 'input-div',
    template: `
{{title}}
`
})
export class InputDivComponent  { 
    @Input() title: string;     // title변수는 외부로 부터 받아서 활용한다.
                                     // (이름이 너무 긴 경우 @Input('a')와 같이 argument로 alias name을 넘겨서 활용할 수도 있다.)
}

// 위에 있는 컴포넌트를 아래 추가할 두개의 컴포넌트에서 동일하게 활용할 것이므로, 변수로 선언함.
var inputDivParentTemplate = ``;     

@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대로 태그가 그려진다.

    loading...
    loading..

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

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

    loading...
    loading..

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

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

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