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。
また、変更する前にコンソールで値を確認してください。