javascript - Angular2 创建组件

Question

我想在 angular2 中创建一个具有特定属性的新组件，这样我就可以使用一个标签

<my-cmp type="Type1"></my-cmp>

我尝试了很多示例，但没有一个有效。如果有人有任何工作示例，请帮助我，谢谢。

谢谢哈立德

Answer 1

给你。参见 this plunker .用 TypeScript 编写:

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

@Component({
  selector: 'my-cmp'
  template: `
    <div>
      <b>Type:</b> {{ type }}
    </div>
  `
})
class MyComponent {
  @Input() type;
}

@Component({
  selector: 'my-app',
  directives: [MyComponent],
  template: `
    <my-cmp type="Static Type"></my-cmp>
    <my-cmp [type]="dynamicType + dynamicTypeIndex"></my-cmp>
  `
})
export class App {
  dynamicType: string = 'Dynamic Type ';
  dynamicTypeIndex: number = 0;

  constructor() {
    setInterval(() => ++this.dynamicTypeIndex, 1000);
  }
}