javascript - 如何根据 url 的结果更改我的 angular 7 网站上的 css 元素？

Question

我有几个 sonoff tasmotas，我正在为它们制作一个 Web 控制面板。如果我去 http://sonoff/cmnd?cmnd=Power (或类似的东西)它将以 {"power": "on"} 或 {"power": "off"} 响应。如何根据此响应更改应用于 html 对象的 css 类。当我在不重新加载页面的情况下手动按下​​ sonoff 上的按钮时，我还需要更改它。

任何帮助将不胜感激

我完全是菜鸟，我使用 ng new PrinterPanel --routing 创建了一个新元素并且没有对结构做太多改动。

Answer 1

我猜测对 URL 的调用是从 Controller /服务发出的。 如果是这种情况，您可能会在点击和其他事件上调用一些函数，也许这样的方法对您有用:

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

在 Controller 中:

$scope.styleFunction = function(param){

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