2017-09-02 3 views
0

私の質問が重複していないためにどのようにきれいなコードは、私は2つのコンポーネント持っ角度4.Angular4 - コード

でクリーンなコードを書くことをお勧めについてです - クライアントとホストを、かなり類似した彼らは、両方ともいくつかを持っています<video>要素であり、両方が同様のコードを持つこの<video>要素を処理します。

この2つのコンポーネントでコードを複製せずにこれを実装する最良の方法は何ですか?私は例のビデオ・コンポーネントのための別のコンポーネントを作成する場合

は覚えているし、私は...など、ストリーム、近いストリームを、開始し、私はカメラ、マイクオフ、オンするためにいくつかの公共の機能を提供する必要があり、この<video>で を持っています私は新しいビデオコンポーネントでクライアント/ホストコンポーネントから実行する必要があるいくつかの機能があります。

+0

typescriptを使用している場合、基本クラスと2つの派生クラスを作成できます。 – dkarchmer

+1

これは本当に一般的な質問です。機能が強化されたビデオプレーヤーのように、複数の場所で多かれ少なかれ使用されているコンポーネントがある場合は、そのコンポーネントをラップして、一般的な入力(ソースURLなど)で再利用およびカスタマイズできるようにする必要があります。消費者が処理する一般的な出力イベントを(ビデオの一時停止など)ブロードキャストします。また、消費者が直接または共有サービスを通じて使用できる機能を公開することもできます。 – bryan60

答えて

2

角度でコードを再利用することはサービスで行われます。 サービスを他のコンポーネントに挿入するには、サービスをコンポーネントのコンストラクタに表示します。

Angularはプロバイダーツリーを見て、サービスのインスタンスを挿入します。各コンポーネントインスタンスに対してシングルトンサービスを行うか、サービスの別のインスタンスを必要とするかによって、モジュール内またはコンポーネント内のサービスが提供されます。

コンポーネントのコードは非常に痩せていて、非常に単純な関数といくつかの状態変数のみを含んでいる必要があります(ただし、偶数の状態はオブザーバブルに置き換えられますが、別のトピックです)。

このモデルは、継承よりも構図を優先し、JavaScript(およびTypeScript)などのプロトタイプベースの言語では、はるかに優れています。単一の基本クラスの代わりに複数のサービスから機能を構成することができます。

2

角度はすべて粒度に関するものです。アプリケーション全体に共通コンポーネントサービスを含める場合、アプリケーションに「共通フレーム」のようなものを作成する必要があります。一般的なコンポーネントはネストされたコンポーネントと呼ばれます。 例:動画プレーヤー、投票星などすべての一般的なネストされたコンポーネントとサービスを指定したら、角度依存性注入コンテナをビルドして、それらを使用していつでも使用できます。 (ちょうど@ LazarLjubenović書いたように)。

第2のタイプのコンポーネントは、いわゆるルーティング可能なコンポーネントと呼ばれ、アプリケーションの重要な部分を持ちたいときに使用します。 たとえば :ウェルカムページ、詳細ページなど

あなたが最初の場所で確認する必要がありますどのようなもののほかにはAngular2 style guideです。良い実践についての非常に重要な情報があります。