2017-12-26 15 views
1

たとえば、私はいくつかの機能を持っていますfooA()fooB() ...多くのコンポーネントで使用されています。いつAngularでサービスを作成する必要がありますか?

これらのメソッドをサービスクラスにラップして挿入するか、これらの静的関数を持つクラスをエクスポートする必要がありますか?

サービスでラップ:

... 
@Injectable() 
export class SampleService { 
    fooA() {...} 

    fooB() {...} 
} 

@Component({ 
    ... 
    providers: [SampleService] 
}) 
export class SampleComponent { 
    constructor(private sampleService: SampleService) {...} 

    method() { 
     this.sampleService.fooA(); 
    } 
} 

は、単にクラスをエクスポートする:あなたが再利用されているメソッドを持って

export class Utils { 
    static fooA() {...} 

    static fooB() {...} 
} 

@Component({...}) 
export class SampleComponent { 
    method() { 
     Utils.fooA(); 
    } 
} 

答えて

1

場合は、shared serviceを作成する必要があります。または、これらのメソッドを使用して基本コンポーネントを作成し、コンポーネントをbase componentから拡張します。

+0

最新のコードスニペットをご覧ください。申し訳ありませんが私は明確に私の質問を記述していない。 – Ran

1

角度サービスを作成して、親子関係または兄弟コンポーネントを必ずしも持たないコンポーネントの間で機能を共有することができます。このようにして、1つのサービスに必要な機能をよりよくカプセル化し、使用するコンポーネントコンストラクターに注入することができます。たとえば、2つのコンポーネント間でデータを共有する非同期通信を作成する場合は、RxJSライブラリを使用してサービスを作成し、取得したいメッセージ、または送信するメッセージをサブスクライブすることができます。データを他のコンポーネントに送信します。

あなたがここにいくつかの例について読むことができます:あなたたとえば

angular component interaction

ways-to-communicate-between-angular-components

を、代わりに、より良い設計とコードのカプセル化のために、各コンポーネントにfooA()fooB()の機能をコピーするので、 Injectable decoratorを使用して角度サービスを作成し、それらの機能を呼び出す必要のある各コンポーネントにそのサービスを挿入することができます。

これらの関数をエクスポートすると、すべてのコンポーネントで使用できるようになりますが、サービスを注入するだけで使用できます。

+0

最新のコードスニペットをご覧ください。申し訳ありませんが私は明確に私の質問を記述していない。 – Ran

1

これらの関数のロジックが非常にグローバルで、アプリケーション全体で変更されない場合は、静的関数を使用する必要があります。

非静的関数を使用したサービスの作成は、特定のクラス、つまりプライベート関数内の関数を使用する場合や、別のクラス、つまりpublic関数が必要な場合に適しています。また、あるクラスがスーパークラス(それが継承するクラス)の実装をオーバーライドしたい場合、その関数を非静的メンバーとして定義します。

ロジックがグローバルで、アプリケーション間で変更されない場合は、それらをスタティック関数として使用し、それ以外の場合は非スタティックなメンバにします。

関連する問題