Создание компонентов Angular 2 в разметке

Question

Как создать мои компоненты в (вложенной) разметке?

<component-name [field]="value"></component-name>, похоже, не работает.

Рассмотрим следующий пример:

import {bootstrap, Component, FORM_DIRECTIVES, CORE_DIRECTIVES} from 'angular2/angular2'; 

@Component({ 
    selector: "hero-detail", 
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES], 
    template: `Name: {{name}}` 
}) 
class HeroDetail { 
    public name: string; 
} 

@Component({ 
    selector: 'my-app', 
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, HeroDetail], 
    template:` 
    <h1>Heroes</h1> 
    <hero-detail [name]="name"></hero-detail> 
    ` 
}) 
class AppComponent { 
    public name: string = "Funky name"; 
} 

bootstrap(AppComponent); 

Выходы:

Name:

Answer 1

Вы должны отметить name свойство HeroDetail компонента как "вход". Для этого вы можете использовать либо @Input декоратор, либо inputs объект @Component декоратор. См. this plunker.

import {bootstrap, Component, Input} from 'angular2/angular2'; 

@Component({ 
    selector: "hero-detail", 
    template: `Name: {{name}}`, 
    // inputs: ['name'] <-- you can use "inputs" property in @Component 
}) 
class HeroDetail { 
    @Input() name: string; // or @Input property decorator 
} 

@Component({ 
    selector: 'my-app', 
    directives: [HeroDetail], 
    template:` 
    <h1>Heroes</h1> 
    <hero-detail [name]="name"></hero-detail> 
    ` 
}) 
class AppComponent { 
    public name: string = "Funky name"; 
} 

bootstrap(AppComponent);