Angular6-サービス

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

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

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

C:\projectA6\Angular6App>ng g service myservice
CREATE src/app/myservice.service.spec.ts (392 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()
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。ここで、作成された新しい日付()を返します。コンポーネントクラスでこの関数にアクセスする方法を見てみましょう。

app.component.ts

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

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

に日付を表​​示します .html 以下に示すファイル-

{{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.component.html',
   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.component.htmlファイル。上記の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.component.html',
   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.component.html',
   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

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