Javascript 我有两个不同的元素相同的风格。如何覆盖它们以保持代码干燥？

我想改变我的风格

            <p class="is-discount" [ngStyle]="{
                'background-color':
                  bike.discount > 70
                    ? 'red'
                    : bike.discount > 60
                    ? 'pink'
                    : bike.discount > 50
                    ? 'orange'
                    : null
              }">
              -{{ bike.discount }}%
            </p>

-{{bike.discount}}}

70 ? '红色的 ：自行车折扣>60 ? '粉红' ：自行车折扣>50 ? '橙色' ：null }"> -{{bike.discount}}}

{{
bike.price-（bike.折扣/100）*bike.price
|货币：“欧元”
}}

如果要在两个元素上使用相同的

ngStyle

。请在组件的

.ts

文件中创建一个变量：

myStyle = {
           'color':
            bike.discount > 70
            ? 'red'
            : bike.discount > 60
            ? 'pink'
            : bike.discount > 50
            ? 'orange'
            : null
          }

然后您可以在组件的

.html

文件中使用它，如下所示：

<p class="is-discount" [ngStyle]="myStyle">
  -{{ bike.discount }}%
</p>

-{{bike.discount}}}

<p class="is-discount" [ngStyle]="myStyle">
  -{{ bike.discount }}%
</p>