角度2異なるビジネスロジックを使用する複数の場所で同じコンポーネント

Question

ご質問の長らって申し訳ありません。私はいくつかの設計上の問題があります。

roomView配列を@InputとしてHTMLページに表示するコンポーネントがあります。

export class RoomView { 
"id": string, 
"name": string, 
"markerIcon": string, 
"backgroundColorClass": string 
} 

部屋-browser.component.ts

@Component({ 
    selector: 'room-browser', 
    templateUrl: 'room-browser.component.html', 
}) 
export class RoomBrowserComponent { 
    @Input() roomsList: RoomView[]: = []; 
} 

部屋-browser.component.html

<div *ngFor="let room of roomsList"> 
    <div class="room.backgroundColorClass"> 
    {{room.name}} 
    <i class="{{room.markerIcon}}"></i> 
    </div> 

私の一般的な部屋のCOMPON ENTは部屋-ブラウザにroomViewを提供

ジェネリック-room.component.ts

@Component({ 
    selector: 'room', 
    templateUrl: 'room.html', 
}) 
export class GenericRoomComponent implements OnInit { 

    @Input() source: string; 

    private roomView: RoomView[] = []; 

    ngOnInit() { 
     this.roomView = // i am getting this from backed successfully 
     // here I need to decide marker icon and background color class based on some criteria which differs from page to page 
     // I have different sections like space, energy, maintenance etc... 
     // for space, needs to get space usage for rooms from backend and then decide color 
     // for energy, needs to get energy usage and decide the colors 
     // for maintenance, needs get devices information of rooms and decide color 

    //I want to avoid something like this 
    if (this.source === 'space') { 
     // get space usage 
    } else if (this.source === 'energy') { 
     // get space usage 
    } else if (this.source === 'maintenance') { 
     // get device info and decide color 
    } 
    } 

} 

room.html

<room-browser [roomsList]="roomView"></room-browser> 

space.html

<room [source]="space"></room> 

energy.html

<room [source]="energy"></room> 

maintenance.html

<room [source]="maintenance"></room> 

私はページへのページとは異なるいくつかの基準に基づいて、マーカーアイコンと背景色のクラスを決定する必要があります。

私はスペース、エネルギー、メンテナンスなどのさまざまなセクションを持っていますが、スペースのためにバックエンドからのスペースの使用を取得し、次に色を決定する必要があります。エネルギーはエネルギー使用量を取得し、部屋のデバイス情報を取得して色を決定する

このユースケース固有のロジックを汎用コンポーネント内でどのように実装できますか？

Answer 1

私はあなたのシナリオを完全に理解していませんが、これらの色ごとにGenericRoomComponentにカラープロパティを追加し、追加の@Inputプロパティを使用して子コンポーネントに渡すことができます。

これらの値を保持するサービスを構築し、各子コンポーネントがこれらの値を読み取るようにすることができます。

Answer 2

複数のモジュール間でコンポーネントを使用する場合は、「共有」モジュールを作成し、そのコンポーネントを共有モジュールの書き出しに追加する必要があります。次に、その共有モジュールを他のモジュールのインポートに追加します。