Angular4-services
Angular 4-サービス
この章では、Angular 4のサービスについて説明します。
ページのどこでもコードを使用する必要がある場合があります。 コンポーネント間で共有する必要があるデータ接続などに使用できます。 サービスはそれを達成するのに役立ちます。 サービスを使用すると、プロジェクト全体の他のコンポーネントのメソッドとプロパティにアクセスできます。
サービスを作成するには、コマンドラインを使用する必要があります。 同じためのコマンドは-
ファイルは次のようにアプリフォルダに作成されます-
以下は、下部に作成されたファイル- myservice.service.specs.ts および myservice.service.ts です。
myservice.service.ts
ここでは、Injectableモジュールが @ angular/core からインポートされます。 @ Injectable メソッドと MyserviceService というクラスが含まれています。 このクラスでサービス関数を作成します。
新しいサービスを作成する前に、メインの親 app.module.ts で作成されたサービスを含める必要があります。
クラス名を使用してサービスをインポートし、同じクラスがプロバイダーで使用されています。 ここで、サービスクラスに戻り、サービス関数を作成しましょう。
サービスクラスでは、今日の日付を表示する関数を作成します。 メインの親コンポーネント app.component.ts と、前の章で作成した新しいコンポーネント new-cmp.component.ts で同じ関数を使用できます。
ここで、関数がサービスでどのように見えるか、コンポーネントでどのように使用するかを見てみましょう。
上記のサービスファイルでは、関数 showTodayDate を作成しました。 次に、作成された新しいDate()を返します。 コンポーネントクラスでこの関数にアクセスする方法を見てみましょう。
app.component.ts
以下に示すように、 l ファイルに日付を表示します-
作成された新しいコンポーネントでサービスを使用する方法を見てみましょう。
作成した新しいコンポーネントでは、最初に必要なサービスをインポートし、そのサービスのメソッドとプロパティにアクセスする必要があります。 ハイライトされたコードをご覧ください。 今日の日付は、次のようにコンポーネントのHTMLに表示されます-
新しいコンポーネントのセレクターは app.componentl ファイルで使用されます。 上記のHTMLファイルの内容は、以下に示すようにブラウザに表示されます-
コンポーネントのサービスのプロパティを変更すると、他のコンポーネントでも同じことが変更されます。 これがどのように機能するかを見てみましょう。
サービスで1つの変数を定義し、それを親および新しいコンポーネントで使用します。 親コンポーネントのプロパティを再度変更し、新しいコンポーネントで同じプロパティが変更されたかどうかを確認します。
他のコンポーネントで serviceproperty 変数を使用してみましょう。 app.component.ts では、次のように変数にアクセスしています-
変数を取得して、console.logを操作します。 次の行では、変数の値を「 component created 」に変更します。 new-cmp.component.ts でも同じことを行います。
上記のコンポーネントでは、何も変更せず、プロパティをコンポーネントプロパティに直接割り当てています。
ブラウザで実行すると、 app.component.ts で値が変更され、 new-cmp.component.ts でも同じ値が表示されるため、サービスプロパティが変更されます。
また、変更する前にコンソールで値を確認してください。