Angular2で階層的DIを使う #Angular2

Angular2でとっても便利だと思ったのは、DI。コンポーネントの階層に応じて代入することができます。

サンプル

バージョン

Angular2 beta.9

使い方

注入されるクラスに @Injectable() を設定する

@Injectable()
export class MyData {
    public title:string = "サンプルテキスト";
}

注入したい対象のクラスのアノテーションに providers: [クラス名] を記述する

@Component({
    selector: 'my-foo',
    template: `
        <h2>FooComponent</h2>
        <my-hoge></my-hoge>
        <my-piyo></my-piyo>
    `,
    providers: [MyData],
    directives: [HogeComponent, PiyoComponent]
})
class FooComponent {
    constructor(private myData:MyData) {
    }
}

このコンポーネントにぶら下がる子供のコンポーネントは、providersを設定しなくても、コンストラクターで受け取ることができます。

@Component({
    selector: 'my-hoge',
    template: '<p>見出し : {{myData.title}}</p>'
})
class HogeComponent {
    constructor(private myData:MyData) {
    }
}

以上。簡単ですね。神機能です！