Question

我正在创建一个使用大量动态样式（例如10个）[styles.xx]的组件，以便用户可以自定义组件的外观。另外，该组分可以在母组分中重复多次（例如10-20次）。样式示例包括：

[style.color]
[style.font-size]
[style.text-alignment]

我加入了ChangeDetectionStrategy.OnPush以最大程度地减少对性能的影响。

当我使用合并的样式滚动而不是不使用样式时，我确实注意到这听起来很主观，这在滚动性能上略显呆滞。

我的问题是：

通过在重复的组件中使用大量动态样式，这会影响性能吗？即使使用ChangeDetectionStrategy.OnPush？
使用ngStyles vs样式可以提高性能吗？
我还可以使用其他哪些策略来最大程度地降低性能影响？

注意：我只需要组件初始化时使用的样式。

我想使用document.getElementsByClassName和set属性来更改init的样式，但希望找到一种使用样式的简便方法。

预先感谢

部分组件示例（我正在使用Ionic）。

<ion-card *ngIf="traits.isLock && isRead !== 4 && element.is_card_read" fxFlex fxLayout="horizontal" class="element-inactive element" [style.background-color]="element.card_read_bg_color" style="min-height: 50px" no-margin>   
    <div fxFlex>  

      <div fxFlex fxLayout="vertical">   
        <div style="width:100%" [style.text-align]="labelAlignment">
          <label *ngIf="element.is_label_show" class="label caption"  [style.color]="element.read_caption_color" [style.font-size.px]="labelSize">{{columnName}}</label>
        </div>      
        <div style="width:100%" [style.text-align]="textAlignment">
          <span [style.font-size.px]="textSize" [style.color]="element.read_text_color">{{value}}</span>
        </div>      
      </div>    
    </div> 
  </ion-card>

Angular 7对动态样式的性能影响

0 个答案: