2016年12月20日

Angular2のサービス

Angular2のサービスに関しては「Angular2のDIを知る - Qiita」が詳しかった。

serviceは単純にデータ構造をかえすものにしておいて、providersに配列として登録、constructor(private fooService: FooService)みたいな感じで設定しておけばclass内からアクセスできるようになる。

myFoo.service.ts

export default class FooService {
say1(): string {
return "foo1";
}
say2(): string {
return "foo2";
}
}


app.component.ts

import { Component } from '@angular/core';
import FooService from "./myFoo.service";

@Component({
selector: 'my-app',
providers: [FooService],
template: `
<div>
<h1>{{name}}</h1>
<p (click)="onClick()">click</p>
</div>
`
})
export class AppComponent {
name:string;
constructor(private fooService: FooService) {
this.name = fooService.say1();
}
onClick(){
this.name = this.fooService.say2();
}
タグ:Angular2
posted by ねこまんま at 00:41 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック