如何根據URL的結果在我的angular 7網站上更改css元素？

Question

我有一些sonoff tasmotas，並且正在為他們制作一個Web控制面板。 如果我轉到http：// sonoff / cmnd？cmnd = Power （或類似的名稱），它將以{“ power”：“ on”}或{“ power”：“ off”}進行響應。 如何根據此響應更改將哪些CSS類應用於html對象。 當我在不重新加載頁面的情況下手動按下​​子菜單上的按鈕時，我也需要更改它。

任何幫助都感激不盡

我是一個新手，我使用ng new PrinterPanel --routing創建了一個新項目，並且結構沒有太大改變。

Answer 1

我猜對URL的調用是從控制器/服務進行的。 如果是這種情況，則您可能有一些要在單擊和其他事件上調用的函數，也許這樣的事情對您有用：

<span ng-class="styleFunction('Power')">some text</span>

並在控制器中：

$scope.styleFunction = function(param){

$http.get(http://sonoff/cmnd?cmnd=" + param)
  .then(function(response) {
    if (response[param] === 'on')
        return "ClassOn";
    else
        return "ClassOff";
  });    
  }  
}