Javascript angular 2在多个位置使用不同业务逻辑的相同组件

对不起，问题太长了。我有一些设计问题

我有一个组件，它将roomView数组作为@Input并在HTML页面中显示它们

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

房间浏览器.component.ts

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

@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
    }
    }

}

房间浏览器.component.html

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

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

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

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

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

room.html

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

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

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

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

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

space.html

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

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

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

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

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

energy.html

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

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

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

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

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

maintenance.html

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

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

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

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

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

我需要决定标记图标和背景颜色类的一些标准，这在不同的网页上

我有不同的部分，如空间，能源，维修等。。。对于空间，需要从后端获取房间的空间使用情况，然后决定颜色；对于能源，需要获取能源使用情况，然后决定颜色；对于维护，需要获取房间的设备信息，然后决定颜色

---

那么，如何以及在何处在通用组件中实现此特定于用例的逻辑？

我不确定是否完全理解您的场景，但您可以为这些颜色中的每种颜色向GenericRoomComponent添加颜色属性，并通过其他@Input属性将其传递给子组件

---

或者，您可以构建一个保留这些值的服务，并让每个子组件读取这些值。

我不确定我是否完全理解您的场景，但您可以为这些颜色中的每一种向GenericRoomComponent添加颜色属性，并通过其他@Input属性将它们传递给子组件

---

或者，您可以构建一个保留这些值的服务，并让每个子组件读取这些值。

如果您希望跨多个模块使用组件，则需要创建一个“共享”模块，并将该组件添加到共享模块的导出中。然后将该共享模块添加到其他模块导入中。

如果要跨多个模块使用组件，则需要创建一个“共享”模块，并将该组件添加到共享模块的导出中。然后将该共享模块添加到其他模块导入中。

要添加颜色属性，我有不同的逻辑，这取决于我是在空间、能源还是维护中使用房间组件。对于空间，我需要从后端获取空间使用情况，并决定使用时间少于2小时的颜色，然后是红色等。。对于维护部分，我需要获得房间的设备，如果设备出现错误，则标记为红色。所以我的问题是在哪里以及如何实现这个逻辑？要添加颜色属性，我有不同的逻辑，这取决于我是在空间、能源还是维护中使用房间组件。对于空间，我需要从后端获取空间使用情况，并决定使用时间少于2小时的颜色，然后是红色等。。对于维护部分，我需要获得房间的设备，如果设备出现错误，则标记为红色。所以我的问题是在哪里以及如何实现这个逻辑？