Question

我想在angular2中创建一个具有特定属性的新组件，因此我可以将标签用作此

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

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

由于物语

Answer 1

您可以使用my test repository（为我为Angular 2.0准备的presentation制作）

希望它有所帮助...

修改

另一个有趣的资源是我创建的playground repository，试验ngUpgrade。对于当前的Angular 2.0版本（alpha 45），此功能尚未公开，但我通过从Angular的源代码导入模块来演示它的使用。

Answer 2

你在这里。见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);
  }
}

Answer 3

最简单的答案是@Component注释将任何typescript类转换为angular2组件。注释为@Component（{}）的任何typescript类都是angular2组件。正如您在上一个答案中所看到的，2个类用@Component注释。 Component将json对象作为参数来告诉angular2组件的行为。

   @Component({
      selector: 'my-app',   //will be user in html as tag/attribut
      template: `   //the html injection etc
        <my-cmp type="Static Type"></my-cmp>
        <my-cmp [type]="dynamicType + dynamicTypeIndex"></my-cmp>
      `
    })
    export class AppCompoment {   //we exported this class/component so that it can be imported

    }

Angular2创建一个组件

3 个答案: