如何在Angular中不使用内联样式改写[style.display]逻辑？

你可以通过CSS类绑定的方式替代内联样式，完全符合CSP规范，同时保留原有逻辑。以下是具体实现方式：

方法一：直接用属性绑定切换CSS类 #

1. 在组件的CSS/SCSS文件中定义控制显示状态的类：

.display-inherit {
  display: inherit;
}
.display-none {
  display: none;
}

2. 修改模板代码，用类绑定替换内联样式：

<div class="ccav-notify-pannel-wrapper" *ngIf="ccavShowWarningPanel" 
     [class.display-inherit]="!collapseAccountOverview" 
     [class.display-none]="collapseAccountOverview">

或者用ngClass简化多类绑定：

<div class="ccav-notify-pannel-wrapper" *ngIf="ccavShowWarningPanel"
     [ngClass]="{'display-inherit': !collapseAccountOverview, 'display-none': collapseAccountOverview}">

方法二：通过TypeScript计算属性控制类名 #

如果后续需要扩展显示逻辑，可在TS中封装计算属性：

1. 在组件类中添加计算属性：

get panelDisplayClass(): string {
  return this.collapseAccountOverview ? 'display-none' : 'display-inherit';
}

2. 模板中绑定该类：

<div class="ccav-notify-pannel-wrapper" *ngIf="ccavShowWarningPanel"
     [class]="panelDisplayClass">

若要保留原有基础类，可这样写：

<div class="ccav-notify-pannel-wrapper {{panelDisplayClass}}" *ngIf="ccavShowWarningPanel">

注意 #

不要用*ngIf替代display:none，因为前者会直接移除DOM元素，和原代码中"隐藏但保留DOM"的逻辑不一致，除非业务需求允许这种差异。

内容的提问来源于stack exchange，提问作者Ekans