home wiki.fukuchiharuki.me
Menu
Top/はじめてのAngular2/Componentを作る・利用する

Componentってなに†

Componentはビューとロジックをもった要素。

↑

Componentを作る†

  • @Component（メタデータ）をつけて 
    @Component({
  selector: 'alert-button',
  template: `
    <button (click)="onClick()">Click me!</button>
  `
})
  • classをexportする 
    export class AlertButtonComponent{
  onClick(): void {
    window.alert('Hello!!');
  }
}

メタデータに名前（セレクタ）やテンプレート、スタイルを書きます。Javaでいうところのアノテーションみたいな感じですかね。書き方も似ていますし。classはそのまま、Java同様のクラスですね。そのコンポーネントの属性と振る舞いを書きます。

Componentを用意して組み合わせていくのが最近の向きらしいですね。プログラミングとして新しい概念ではありませんが、jQueryでDOM操作をガリガリするのがもう辛すぎたということでしょう。確かに辛かった。

↑

Componentを利用する†

  • exportしたクラスをimportして 
    import {AlertButtonComponent} from './alert-button.component';
  • メタデータのdirectivesに追加して
  • メタデータのtemplateで使う 
    @Component({
  selector: 'my-app',
  template: `
    <h1>My First Angular 2 App R2</h1>
    <alert-button></alert-button>
  `,
  directives: [AlertButtonComponent]
})

Componentはselectorで名前がついているので、使う側はその名前にてtemplateで使う。

↑

ソースコード†

↑

参考†