javascript - Angular 2相同的组件在多个地方具有不同的业务逻辑

Question

抱歉问题太长了。我有一些设计问题。

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

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

room-browser.component.ts

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

room-browser.component.html

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

我的通用房间组件向房间浏览器提供 roomView

generic-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>

ma​​intenance.html

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

我需要根据页面之间不同的一些标准来决定标记图标和背景颜色类别。

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

那么我如何以及在哪里可以在通用组件内实现此用例特定逻辑？

Answer 1

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

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