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

Question

我有几个sonoff tasmotas，我正在为它们制作一个Web 控制面板。如果我去http://sonoff/cmnd?cmnd=Power（或类似的东西），它会回复{“power”：“on”}或{“power”：“off”}。如何根据来自此的响应更改将哪些 css 类应用于 html 对象。当我手动按下sonoff上的按钮而不重新加载页面时，我还需要更改它。

任何帮助将不胜感激

我是个菜鸟，我用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";
  });    
  }  
}