Angular 4を使用してアプリケーションをよりスケーラブルかつ柔軟にするにはどうすればよいですか？

Question

私はこのようなものがありますPlunker、私の元のコードは、キーボードイベントとマウスイベントのようないくつかの変更があります。

コードは単一のコンポーネントとして機能していますが、私の問題は異なるデータで多数のカードリストを作成する必要がありますが、同時に別のカードを作成する必要があります。同じMouseEventsとキーボード「カードリスト」よりもイベントは異なるが、データとスタイルは異なる。私の場合は

それは「Notifications-Cards」の異なるものになると「Person-Card-Listを」が、すべてのカードは、マウスとキーボードを取得するService含まグローバルCard-Container-Componentのようなものを持っています「User-Card-List」のようなものになりますイベント。それはサービスでそれを使用することはできませんように

私はthis@HostListenerによるMouseServiceとKeyboardService

を作成したらしいです。

私はこれをたとえばCtrlキーボードイベントを取得するために使用しました。

@Injectable() 
export class KeyboardService { 

    public isCtrlKeyDown = false; 

    constructor() { 
    window.addEventListener('keydown', (event) => { 
     if (event.keyCode === 17 && !this.isCtrlKeyDown) { 
     this.isCtrlKeyDown = true; 
     } 
    }); 

    window.addEventListener('keyup', (event) => { 
     if (event.keyCode === 17 && this.isCtrlKeyDown) { 
     this.isCtrlKeyDown = false; 
     } 
    }); 
    } 

} 

と今、私は私がよりスケーラブルで柔軟なアプリケーションのためのPlunkerのようなものを作ることができる方法を知っておく必要があるとAngular Projectionは私が必要とする正確に何であるならば、私は同じWebビューになりますので、私はわからないんだけど2つまたは3つの異なるカードコンポーネント（通知カードは、別のカードコンポーネントですべてのビューに表示されます）。

あなたが私を理解できることを願っています=）ありがとう。

Answer 1

この回答は、HostListenerにはあまり関係ありません。

• 私は完全にあなたの質問に答えますが、あなたは「プレゼンテーション」コンポーネント対「スマート」にあなたの角度クラスの懸念を分離した場合、それはまた、あなたを整理に役立つかもしれない自分自身で、以下のコードを考えていませんコードベース。あなたの全体的なニーズに合っているようです。
• 最後には、お客様のニーズに対応するための脚注がいくつかあります。ここで

はそれの要点です：

// Smart because it's aware of service layer // 
import {Component,OnInit} from '@angular/core'; 
import {Domain} from '../shared/model/domain'; 
import {DomainService} from '../services/domain-service'; 
import {Observable} from 'rxjs'; 
@Component({ 
    selector: 'smart-component', 
    templateUrl:'./smart-component.html', 
    stylesUrl: ['./smart-component.css'] 
}) 
export class SmartComponent implements OnInit { 
    domains$ : Observable<Domain[]>; // define data stream view needs. 
    constructor(private domainService : DomainService) {} 

    ngOnInit { 
    this.domains$ = this.domainService.findAllDomains(); 
    } 
} 

smart.component.html

smart.component.ts

<presentation-list [domains]="domains$ | async"></presentation-list> 

プレゼンテーション-component.ts

// handles layout only // 
import {Component,Input} from '@angular/core'; 
import {Domain} from '../shared/model/domain'; 
@Component({ 
    selector: 'presentation-list', 
    templateUrl:'./presentation-component.html', 
    stylesUrl: ['./presentation-component.css'] 
}) 
export class PresentationComponent { 
    @Input() 
    domains: Domain[]; 
    // see smart.component.html calling presentation-list [domains] 
    // presentation-list is the selector of this class. 
} 

プレゼンテーションcomponent.html

<table *ngIf="domains else loadingDomain"> 
    <tr *ngFor="let domain of domains"> 
    <td> 
     {{domain.field}} 
    </td> 
    </tr> 
</table> 
<template #loadingDomain> 
    <div>Loading data ...</div> 
</template> 

---

行うためのもう一つは、次のようになります。

1. は方法のための共通のインタフェースを定義し、あなたの異なったドメインクラスのサービスが必要になります。
2. ドメインクラスの共通インターフェイスを実装するサービスを作成します。 'データ変更' の

私は考えているだろう：

• ReactiveForms。私はそれらを使用するプロジェクトを設定する他の側面についていくつかのヒントを与えましたhere
• ChangeDetectionStrategy.onPush

私が作ったコンテンツ投影と<ngContent></ngContent>についてのコメントはまだ適用されている可能性があります。おそらく、さまざまな実装を取り替える指令を定義する方法があります。誰かがこれに2セントでこれを加えると、私にとっても役に立ちます。