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();
  }