Question

在我的项目中，我有一个用于设置元素的CSS类的函数。

此函数在需要应用动态CSS的不同组件中声明，每次我必须对函数进行更改时，我也对所有ts文件进行了更改。

在HTML组件文件中使用单个函数的正确方法是什么？

我应该创建服务吗？

该功能以这种方式工作：

component.ts

GetStatusClass(_s: string): string {

    var c = "";
    switch (_s) { 
      case "NEW":
        c = "label label-primary";
        break;
      case "CONFIRMED":
        c = "label label-success";
        break;
      case "CANCELLED":
        c = "label label-danger";
        break;
      case "CONCLUDED":
        c = "label label-default";
        break;
    }
    return c;
  }

component.html

h4><span class="{{GetStatusClass(offert.offertStatusCode)}}">{{offert.offertStatus}}</span></h4>

感谢支持

Answer 1

pipe这是一个很好的用例。代码看起来像这样：

<span class="{{offert.offertStatusCode | statusClass}}">{{offert.offertStatus}}</span>

在您的模板中使用它如下：

switch

将值放在地图或对象中以消除push语句可能还有点干净。

Angular - 共享html格式化程序函数

1 个答案: