角度相同的組件在多個地方與不同的業務邏輯

我有一個組件，它將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耳鼻喉科提供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>

我需要決定標記圖標以及基於一些從頁不同的標準背景顏色類。

我有空間，能源，維護等空間不同的部分......需要從後端獲得空間使用空間，然後決定顏色，能源需要獲得能源使用並決定顏色和維護需求獲取房間的設備信息並決定顏色

那麼如何以及在哪裏可以在通用組件中實現此用例特定邏輯？

來源

2017-06-26 Pratap A.K

我不知道我完全理解您的方案，但你可以到GenericRoomComponent添加顏色屬性爲每個這些顏色，並通過附加@input性質它們傳遞到子組件。

或者您可以構建一個保留這些值並使每個子組件都讀取這些值的服務。

來源

2017-06-26 18:25:01 DeborahK

要添加顏色屬性，我有不同的邏輯，基於我是否在空間，能量或維護中使用房間組件。對於空間，我需要從後端獲取空間使用量，並決定使用時間少於2小時，然後是紅色等顏色。對於維護部分，如果設備出現錯誤，我需要將空間設備和標記顏色設置爲紅色。所以我的問題是在哪裏以及如何實現這個邏輯？ –

如果你想使用多個模塊的組件，你需要創建一個「共享」模塊，並添加該組件的共享組件的出口。然後，將該共享模塊添加到其他模塊導入中。

來源

2017-09-12 12:39:58

角度相同的組件在多個地方與不同的業務邏輯

回答

相關問題