web-dev-qa-db-ja.com

Angular 2+のサービスとコンポーネントの違いは何ですか？

それらは異なる場所で宣言されます（宣言とプロバイダー）。サービスには、そのサービスを使用するコンポーネントのコンストラクターにインジェクトされる@Injectable（）があることを知っています。しかし、なぜこのようにしなければならないのでしょうか？なぜ1か所で宣言できないのですか？一方ができること、もう一方ができないことは何ですか？

angularservicedependency-injectioncomponents
12
ForcedFakeLaugh

コンポーネント

これは基本的に、クラスがコンポーネントであることをangularに伝えるデコレーター@Componentを持つクラスです。

それらは常にHTMLテンプレートとCSSに関連付けられています。

Htmlの一部が同様の機能で繰り返される場合、コンポーネントに配置することが常に最善です。このコンポーネントは、同じ機能が必要な場合に呼び出すことができます。

サービス

これらは、アプリケーション全体のいくつかの一般的な機能の中心単位です。

それらは関数とメンバーを持つ単純なクラスです。

次の場合に使用-コードの複製が存在し、データにアクセス/保存する。

@Componentや@Directiveとは異なり、サービスにはデコレータはありません。 @Injectableは、あるサービスをコンポーネント、ディレクティブ、または別のサービスで使用する必要がある場合にのみ使用されます。

21
Ravi Sankar Rao

私はAngular自分にはかなり新しいですが、ここに私の理解があります。

成分

docs から：

角度コンポーネントは、ディレクティブのサブセットです。ディレクティブとは異なり、コンポーネントには常にテンプレートがあり、テンプレートの要素ごとにインスタンス化できるコンポーネントは1つだけです。

基本的に、コンポーネントは、表示するアプリケーションの一部をカプセル化するHTML、CSS、およびJavascriptの小さな塊です。

サービス

サービスは、アプリケーションの複数の部分で使用できる機能を提供します。複数のコンポーネントにわたってユーザーに関する特定の情報を表示したいが、コードを繰り返したくない場合、そのコードをサービスに入れます。次に、コンポーネントにサービスを挿入し、サービスからコンポーネント内のコードを表示するユーザーを呼び出します。

@Injectable（）デコレータは、装飾されているサービス内に他のサービスを注入するときに使用され、コンポーネントでサービスを使用するときに含める必要はありません。

16
tgrass12

コアの主な違い

「あるコンポーネントのメソッドに別のコンポーネントにアクセスしたい場合は、オブジェクトを作成してアクセスする必要があります。しかし、@ Injectableは、Constructor（ ）サービスはシングルトンであるため、サービスはシングルトンです。つまり、各サービスの1つのオブジェクトのみがアプリケーション全体で利用可能です。

例：constructor（private http：HttpClient、private toastService：ToastService）

ここでは、HttpClient型の変数を作成し、get/post/putメソッドにアクセスしています。 ToastServiceは、自分のサービスにアクセスするための私のプライベートサービスです。

成分

AngularJSでは、イベントの処理、メソッドの記述、APIの呼び出し、検証のために個別のscript.jsファイルを作成していたので、ご存じのように、このファイルにhtmlでアクセスします

コンポーネントには@ Componentを使用します。そのため、コンポーネントは追加の機能が追加されたスクリプトファイルのようなものです。たとえば、コンポーネントをエクスポートして、アプリケーションのどこでも使用できます。Angular 2オブジェクト指向機能を提供し、外部スクリプト、CSSファイルをインポートするのではなく、サポートしています。

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

export class MyComponent implements OnInit { 
constructor( private http: HttpClient , private toastService: ToastService) { }

ngOnInit() {
    this.fetchAllUnit();
}

}

サービス

サービスには@ Injectableを使用します。サービスは、異なるコンポーネント全体のいくつかの共通機能の共通メソッドに使用されます。これらは、htmlコンテンツではなく、関数とメンバーを持つ単純なクラスです。使用される-コードの重複を減らし、データにアクセスまたは保存するため。

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

@Injectable( {
    providedIn: 'root'
} )
export class ToastService {

    constructor() { }

    public error( msg ) {

        M.toast( { html: msg, classes: 'red darken-2 rounded' } );

    }
    public success( msg ) {
        M.toast( { html: msg, classes: 'green lighten-1 rounded' } );

    }

    public warning( msg ) {

        M.toast( { html: msg, classes: 'yellow darken-4 rounded' } );

    }
}

コメントを歓迎します。

6
Deva