Angular7-サービス

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

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

ng g service myservice

C:\projectA7\angular7-app>ng g service myservice
CREATE src/app/myservice.service.spec.ts (348 bytes)
CREATE src/app/myservice.service.ts (138 bytes)

アプリのフォルダに作成されたファイルは次のとおりです-

サービス

以下に作成されたファイルを下部に示します。myservice.service.specs.tsおよびmyservice.service.ts。

*myservice.service.ts*

import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   constructor() { }
}

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

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

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

import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root'
})
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 7 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

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

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

*app.componentl*

{{todaydate}}
<app-new-cmp></app-new-cmp>

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

*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 {
   newcomponent = "Entered in new component created";
   todaydate;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

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

*new-cmp.componentl*

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

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

Todays Date

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

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

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

import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root'
})
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 7 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でも同じ値が表示されるため、サービスプロパティが変更されます。

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

サービスプロパティ

ここにapp.componentlとnew-cmp.componentlファイルがあります-

*app.componentl*

<h3>{{todaydate}}>/h3>
<h3> Service Property : {{componentproperty}} </h3>
<app-new-cmp></app-new-cmp>

*new-cmp.componentl*

<h3>{{newcomponent}} </h3>
<h3> Service Property : {{newcomponentproperty}} </h3>
<h3> Today's Date : {{todaydate}} </h3>

Angular7-services

Angular7-サービス