我有2个不同元素相同的ngStyle如何覆盖它们以保持代码干燥？

问题描述

我要覆盖ngstyle

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

70 ？ '红' ：折扣> 60 ？ '粉' ：折扣> 50 ？ '橙子' ： 空值 }“> -{{bike.discount}}％

          <p [ngStyle]="{
              'color':
                bike.discount > 70
                  ? 'red'
                  : bike.discount > 60
                  ? 'pink'
                  : bike.discount > 50
                  ? 'orange'
                  : null
            }">
              {{
                bike.price - (bike.discount / 100) * bike.price
                  | currency: "EUR"
              }}
            </p>


      

解决方法

如果要在两个元素上使用相同的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>