在标记中创建 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

您应该将 HeroDetail 组件的 name 属性标记为 "input"。为此，您可以使用 @Input decorator or inputs property of @Component decorator. See 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);

在标记中创建 Angular 2 个组件

Creating Angular 2 components in markup

typescript

angular