第三者のプラグインロジックを角2でカプセル化する方法は？

Question

私はangular-cliで動くAngular 2プロジェクトに取り組んでいます。

サードパーティのプラグインを統合する必要があります。どのようなプラグイン関連のロジックをできるだけ多く1つの場所にカプセル化するのがへの最良のアプローチであるのだろうかと疑問に思っています。

---

私は私のユースケースで問題を説明します：私はサービスにプラグイン関連の初期化と設定ロジックをカプセル化することを決定したhttps://github.com/akserg/ng2-toasty

ので、私：私は、この通知プラグインを実装する必要があります私のプロジェクトで私のNotificationService抽象を使用してください。これは主に、ライブラリを別のライブラリに変更または交換する必要がある場合に、理想的には、変更を行う必要のある場所が1つしかないためです。

import { Injectable } from '@angular/core'; 
import { ToastyService, ToastyConfig, ToastOptions } from 'ng2-toasty'; 

@Injectable() 
export class NotificationService { 

    constructor(
     private toastyService: ToastyService, 
     private toastyConfig: ToastyConfig 
    ) { 
     this.toastyConfig.theme = 'bootstrap'; 
    } 

    fireSuccess(msg: string, title: string = 'Success!') { 
     const toastOptions: ToastOptions = { 
      title, 
      msg 
     }; 

     this.toastyService.success(toastOptions); 
    } 

} 

しかし、プラグイン関連のロジックは3つのより多くの場所に分散している（ファイル）：ここで

は私 notification.service.tsだ

1. プラグインのスタイルシートがangular-cli.jsonにインポートされます。

   { 
       "apps": [ 
        ... // omitted for brevity 
        { 
         "styles": [ 
         "styles.scss", 
         "../node_modules/ng2-toasty/style-bootstrap.css" 
         ], 
        } 
       ], 
       ... // omitted for brevity 
   } 
   

2. プラグインのインポート - ToastyModule.forRoot()は、私のアプリNgModuleに配置されています

   import { ToastyModule } from 'ng2-toasty'; 
   
   @NgModule({ 
       imports: [ 
        ToastyModule.forRoot() 
       ], 
       ... // omitted for brevity 
   }) 
   export class AppModule { } 
   

3. プラグインの<ng2-toasty></ng2-toasty>タグが私のアプリ（that's a plugin-related requirement）のいずれかのテンプレートのどこかに配置する必要があります。そこで、私のメインのapp.component.htmlにタグを追加しました。 notification.service、angular-cli.json、app.module.tsとapp.component.html：私を悩ます

事がプラグイン関連のロジックが4つのファイルの合計に広がっていることです。

---

これは私が考えることができる最もカプセル化されたアプローチです。プラグイン関連のロジックを一箇所（おそらくnotification.service）に移動する方法があるのだろうかと思います。

ので、合計アップするには、私の質問：

が、これは角度2でカプセル化するための最良のアプローチと抽象サードパーティのプラグインですが？

Answer 1

<ng2-toasty></ng2-toasty>のように見えます（正しくない場合は私を修正してください）。したがって、angular 2 component styling guideのように、（style | styleUrls）フィールドを使用して@Componentデコレータにこれに関連するCSS（scss）もカプセル化できます。これはスタイルをカプセル化する最善の方法です。

プラグインのロジックを注入可能なものにカプセル化することは良いアイデアです。明らかに、そのオブジェクトを必要とするクラスに注入する必要があるからです。

しかし、注射可能とは必ずしもサービスを意味するものではありません。角度2では、service conceptは、データソースからデータをフェッチして保存するためのインターフェイスを提供するオブジェクトを意味します。サービスを使用すると、サービスオブジェクトを模擬してコンポーネントに偽のデータを提供できるため、アプリケーションのテストが簡単になります。

これを考慮して、NotificationServiceの名前を変更します。たぶんNotifierなど、サービスと混同しないようにしてください。それはあなた次第です。

しかし、ここには一般的にいくつかの優れたソフトウェア設計があります。ただのコンセプトで作業する必要があります。