Angular2

Angular2で階層的DIを使う

More than 3 years have passed since last update.

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


サンプル

http://plnkr.co/edit/OqmiaLT5bPwjlQsWQ4mY


バージョン

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) {
}
}

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