創建角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

你應該慶祝HeroDetail組件的name屬性爲 「輸入」。爲此，您可以使用@Input裝飾或@Component裝飾的inputs財產。見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);