Angular 2 で AppModule の providers プロパティを使ってサービスをプロバイダー登録する方法

Angular 2 でアプリケーション起動時にサービスを実行する方法

providers プロパティは、コンポーネントのテンプレート内でサービスを注入するために使用されます。アプリケーション起動時にサービスを実行するには、providers プロパティにサービスをルートコンポーネントに追加する必要があります。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [MyService] // サービスを providers プロパティに追加
})
export class AppComponent {
  constructor(private myService: MyService) { }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyService } from './my-service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [MyService], // サービスを AppModule の providers プロパティに追加
  bootstrap: [AppComponent]
})
export class AppModule { }

どちらの方法を使用しても、アプリケーション起動時にサービスが実行されます。サービス内で実行する必要があるコードは、サービスのコンストラクタまたはメソッド内に記述できます。

サービスの定義

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
  constructor() {
    console.log('MyService が作成されました');
  }

  doSomething() {
    console.log('MyService.doSomething() が呼び出されました');
  }
}

ルートコンポーネント

import { Component, OnInit } from '@angular/core';
import { MyService } from './my-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [MyService] // サービスを providers プロパティに追加
})
export class AppComponent implements OnInit {
  constructor(private myService: MyService) { }

  ngOnInit() {
    console.log('AppComponent が初期化されました');
    this.myService.doSomething(); // サービスメソッドを呼び出す
  }
}

AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyService } from './my-service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [MyService], // サービスを AppModule の providers プロパティに追加
  bootstrap: [AppComponent]
})
export class AppModule { }

実行結果

このコードを実行すると、以下の出力がコンソールに出力されます。

MyService が作成されました
AppComponent が初期化されました
MyService.doSomething() が呼び出されました

この例では、MyService はアプリケーション起動時に作成され、AppComponent の ngOnInit メソッド内で doSomething メソッドが呼び出されます。

補足

• サービス内で実行する必要があるコードは、サービスのコンストラクタまたはメソッド内に記述できます。
• サービスを注入するには、コンポーネントまたは他のサービスのコンストラクタにサービスを注入する必要があります。
• サービスはシングルトンとして作成されます。つまり、アプリケーション内でサービスのインスタンスが 1 つしか作成されません。

このサンプルコードは、Angular 2 でアプリケーション起動時にサービスを実行する方法のほんの一例です。サービスを実行するための他の方法もたくさんあります。詳細については、Angular のドキュメントを参照してください。

Angular 2 でアプリケーション起動時にサービスを実行するその他の方法

forRoot メソッドは、ルートモジュール内でサービスをプロバイダーとして登録するために使用されます。アプリケーション起動時にサービスを実行するには、forRoot メソッドを使用してサービスをルートモジュールの providers プロパティに追加する必要があります。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyService } from './my-service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    MyService.forRoot() // MyService.forRoot() を providers プロパティに追加
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

RouterModule は、Angular のルーティング機能を提供します。アプリケーション起動時にサービスを実行するには、RouterModule の providers プロパティにサービスを追加する必要があります。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyService } from './my-service';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', component: AppComponent }
    ])
  ],
  providers: [
    MyService // MyService を providers プロパティに追加
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

カスタムグローバルガードは、アプリケーション内のすべてのルートに適用されるガードです。アプリケーション起動時にサービスを実行するには、カスタムグローバルガード内でサービスを注入し、サービスのメソッドを canActivate メソッド内で呼び出す必要があります。

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { MyService } from './my-service';

@Injectable()
export class MyGlobalGuard implements CanActivate {
  constructor(private router: Router, private myService: MyService) { }

  canActivate(): boolean {
    this.myService.doSomething(); // サービスメソッドを呼び出す
    return true;
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyService } from './my-service';
import { RouterModule } from '@angular/router';
import { MyGlobalGuard } from './my-global-guard';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', component: AppComponent, canActivate: [MyGlobalGuard] }
    ])
  ],
  providers: [
    MyService,
    MyGlobalGuard // MyGlobalGuard を providers プロパティに追加
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

RxJS を使用する

RxJS は、非同期プログラミングのためのライブラリです。アプリケーション起動時にサービスを実行するには、RxJS の Observable を使用してサービスのメソッドを発行し、subscribe メソッドを使用して Observable を購読する必要があります。

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { MyService } from './my-service';

@Injectable()
export class AppService {
  constructor(private myService: MyService) { }

  init(): Observable<void> {
    return of(null).pipe(
      switchMap(() => this.myService.doSomething())
    );
  }
}

import { Component, OnInit } from '@angular/core';
import { AppService } from './app-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private appService: AppService) { }

  ngOnInit() {
    this.appService.init().subscribe();
  }
}

それぞれの方法には、利点と欠点があります。

• providers プロパティを使用する
  • 利点