Angular2創建一個組件

Question

我想在angular2中創建一個具有特定屬性的新組件，因此可以使用一個標簽

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

我嘗試了許多示例，但沒有一個起作用。 如果有人有任何可行的例子，請幫助我，謝謝。

謝謝哈立德

Answer 1

您可以使用我的測試庫 （為我所做的有關Angular 2.0的准備所做的演示而制作）

希望能幫助到你...

編輯

另一個有趣的資源是我創建的游樂場存儲庫 ，正在嘗試ngUpgrade。 對於當前的Angular 2.0版本（alpha 45），該功能尚未公開，但是我通過從Angular的源代碼中導入模塊來演示其使用。

Answer 2

這個給你。 見這個笨蛋 。 用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注釋，將任何打字稿類轉換為angular2組件。 任何標注為@Component（{}）的打字稿類都是angular2組件。 正如您在前面的答案中看到的那樣，兩個類都用@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

    }