Angular 4-サービス

この章では、Angular 4のサービスについて説明します。

ページのどこでもコードを使用する必要がある場合があります。コンポーネント間で共有する必要があるデータ接続などに使用できます。サービスはそれを達成するのに役立ちます。サービスを使用すると、プロジェクト全体の他のコンポーネントのメソッドとプロパティにアクセスできます。

サービスを作成するには、コマンドラインを使用する必要があります。同じためのコマンドは-

C:\projectA4\Angular 4-app>ng g service myservice
installing service
   create src\app\myservice.service.spec.ts
   create src\app\myservice.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

   C:\projectA4\Angular 4-app>

ファイルは次のようにアプリフォルダに作成されます-

アプリフォルダ内のファイル

以下は、下部に作成されたファイル- myservice.service.specs.ts および myservice.service.ts です。

myservice.service.ts

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

@Injectable()
export class MyserviceService {
   constructor() { }
}

ここでは、Injectableモジュールが @ angular/core からインポートされます。 @ Injectable メソッドと MyserviceService というクラスが含まれています。このクラスでサービス関数を作成します。

新しいサービスを作成する前に、メインの親 app.module.ts で作成されたサービスを含める必要があります。

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

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

クラス名を使用してサービスをインポートし、同じクラスがプロバイダーで使用されています。ここで、サービスクラスに戻り、サービス関数を作成しましょう。

サービスクラスでは、今日の日付を表示する関数を作成します。メインの親コンポーネント app.component.ts と、前の章で作成した新しいコンポーネント new-cmp.component.ts で同じ関数を使用できます。

ここで、関数がサービスでどのように見えるか、コンポーネントでどのように使用するかを見てみましょう。

import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

上記のサービスファイルでは、関数 showTodayDate を作成しました。次に、作成された新しいDate（）を返します。コンポーネントクラスでこの関数にアクセスする方法を見てみましょう。

app.component.ts

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

*ngOnInit* 関数は、作成されたコンポーネントでデフォルトで呼び出されます。 上記のように、サービスから日付が取得されます。 サービスの詳細を取得するには、最初にコンポーネント *ts* ファイルにサービスを含める必要があります。

以下に示すように、 l ファイルに日付を表示します-

{{todaydate}}
<app-new-cmp></app-new-cmp>
//data to be displayed to user from the new component class.

作成された新しいコンポーネントでサービスを使用する方法を見てみましょう。

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.componentl',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponent = "Entered in new component created";
   constructor(private myservice: MyserviceService) {}

   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

作成した新しいコンポーネントでは、最初に必要なサービスをインポートし、そのサービスのメソッドとプロパティにアクセスする必要があります。ハイライトされたコードをご覧ください。今日の日付は、次のようにコンポーネントのHTMLに表示されます-

<p>
   {{newcomponent}}
</p>
<p>
   Today's Date : {{todaydate}}
</p>

新しいコンポーネントのセレクターは app.componentl ファイルで使用されます。上記のHTMLファイルの内容は、以下に示すようにブラウザに表示されます-

作成された新しいコンポーネントの出力

コンポーネントのサービスのプロパティを変更すると、他のコンポーネントでも同じことが変更されます。これがどのように機能するかを見てみましょう。

サービスで1つの変数を定義し、それを親および新しいコンポーネントで使用します。親コンポーネントのプロパティを再度変更し、新しいコンポーネントで同じプロパティが変更されたかどうかを確認します。

*myservice.service.ts* では、プロパティを作成し、他の親および新しいコンポーネントで同じプロパティを使用しています。

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

@Injectable()
export class MyserviceService {
   serviceproperty = "Service Created";
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

他のコンポーネントで serviceproperty 変数を使用してみましょう。 app.component.ts では、次のように変数にアクセスしています-

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      console.log(this.myservice.serviceproperty);
      this.myservice.serviceproperty = "component created";//value is changed.
      this.componentproperty = this.myservice.serviceproperty;
   }
}

変数を取得して、console.logを操作します。次の行では、変数の値を「 component created 」に変更します。 new-cmp.component.ts でも同じことを行います。

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.componentl',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponentproperty;
   newcomponent = "Entered in newcomponent";
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.newcomponentproperty = this.myservice.serviceproperty;
   }
}

上記のコンポーネントでは、何も変更せず、プロパティをコンポーネントプロパティに直接割り当てています。

ブラウザで実行すると、 app.component.ts で値が変更され、 new-cmp.component.ts でも同じ値が表示されるため、サービスプロパティが変更されます。

また、変更する前にコンソールで値を確認してください。

コンソール出力

Angular4-services

Angular 4-サービス

myservice.service.ts

app.component.ts