AngularJS与Angular中span元素尺寸差异及间隙问题原因排查

组件模板对比 #

AngularJS版本 #

<span ng-repeat="status in statusInformation.statusList | filter : whereFilter"
      class="show-on-hover">
    <span class="app-icon app-icon_md soh__trigger"
          ng-class="status.informationType.iconClass"></span>
    <span class="soh__content soh__content_multiline app-text_addition-1" ng-bind="status.message"></span>
</span>

现代Angular版本 #

<span *ngFor="let status of statusList" class="show-on-hover">
    <span
        class="app-icon app-icon_md soh__trigger"
        [ngClass]="appealStatusAdditionalInformationTypesMap[status.informationType].iconClass"
    ></span>
    <span class="soh__content soh__content_multiline app-text_addition-1">{{ status.message }}</span>
</span>

渲染效果差异 #

• AngularJS版本：主span元素尺寸更大，图标之间存在间隙（图示：AngularJS版本显示间隙）
• 现代Angular版本：相同span元素尺寸更小，图标之间无间隙（图示：Angular版本无间隙）

生成HTML对比 #

带间隙的AngularJS版本 #

<appeal-status-information status-information="rowData.appealStatusAdditionalInformation" applicant-type="rowData.applicantInfo.applicantType" class="ng-isolate-scope">
  <!-- ngRepeat: status in statusInformation.statusList | filter : whereFilter -->
  <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover ng-scope">
    <span class="app-icon app-icon_md soh__trigger app-icon_cl_prime gis-icon gis-icon-main-response" ng-class="status.informationType.iconClass"></span>
    <span class="soh__content soh__content_multiline app-text_addition-1 ng-binding" ng-bind="status.message">Response received</span>
  </span>
  <!-- end ngRepeat: status in statusInformation.statusList | filter : whereFilter -->
  <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover ng-scope">
    <span class="app-icon app-icon_md soh__trigger app-icon_cl_action mdi mdi-20px mdi-thumb-up-outline" ng-class="status.informationType.iconClass"></span>
    <span class="soh__content soh__content_multiline app-text_addition-1 ng-binding" ng-bind="status.message">Appeal status: Information received</span>
  </span>
  <!-- end ngRepeat: status in statusInformation.statusList | filter : whereFilter -->
</appeal-status-information>

无间隙的现代Angular版本 #

<appeal-status-information>
  <span class="show-on-hover ng-star-inserted">
    <span class="app-icon app-icon_md soh__trigger app-icon_cl_prime gis-icon gis-icon-main-response"></span>
    <span class="soh__content soh__content_multiline app-text_addition-1">Response received</span>
  </span>
  <span class="show-on-hover ng-star-inserted">
    <span class="app-icon app-icon_md soh__trigger app-icon_cl_action mdi mdi-20px mdi-thumb-up-outline"></span>
    <span class="soh__content soh__content_multiline app-text_addition-1">Appeal status: Information received</span>
  </span>
  <!---->
</appeal-status-information>

可能原因分析 #

从代码对比来看，两个版本的最终渲染类名完全一致，布局差异大概率来自以下几点：

• ng-repeat注释引入的空白字符：AngularJS在ng-repeat循环前后会插入完整注释（<!-- ngRepeat: ... -->），注释与span元素之间的换行、空格会被浏览器解析为文本节点，作为inline元素的span会受这些空白影响，产生额外间距。而现代Angular的*ngFor生成的是空注释<!---->，不会引入干扰性空白。
• ng-scope类的隐式样式：AngularJS会给循环生成的元素自动添加ng-scope类，若项目全局样式中针对.ng-scope设置了padding、margin或display属性，会间接改变span的尺寸。现代Angular生成的ng-star-inserted类无这类隐式样式干扰。
• 数据过滤时机的布局影响：AngularJS的模板层面实时过滤（filter : whereFilter）可能导致元素经历多次重绘，浏览器可能保留临时布局尺寸；现代Angular的过滤逻辑若提前在组件类中完成，元素一次性渲染，布局更稳定。
• 浏览器环境差异：若两个版本运行在不同浏览器/浏览器版本中，inline元素对空白字符的处理可能存在细微差异，但此情况优先级低于前三点。

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