VS Code扩展中NG-Zorro nz-tabs组件内容叠加异常求助

问题场景 #

开发VS Code扩展的WebView Angular应用时，使用NG-Zorro的nz-tabs组件，采用最简模板配置后出现异常：首次点击未激活过的标签时，对应内容会叠加在已有内容上方；只有该标签内容曾被显示过，后续切换才会正常。

用户核心代码如下：

模板代码 #

<nz-tabset>
  <nz-tab nzTitle="Tab 1">Content of Tab Pane 1</nz-tab>
  <nz-tab nzTitle="Tab 2">Content of Tab Pane 2</nz-tab>
  <nz-tab nzTitle="Tab 3">Content of Tab Pane 3</nz-tab>
</nz-tabset>

组件代码片段 #

import { NzTabsModule } from "ng-zorro-antd/tabs";

@Component({
  standalone: true,
  imports: [
    NzTabsModule,
  ],
  // 其他配置
})

可能的解决方案 #

1. 确认NG-Zorro样式完整加载 #

VS Code WebView的隔离环境可能导致样式未正确注入，需确保全局引入NG-Zorro的样式：

• 在项目全局样式文件（如styles.css）中添加：

  @import "ng-zorro-antd/style.css";
  

• 或单独引入tabs组件的样式：

  @import "ng-zorro-antd/tabs/style/index.css";
  

2. 调整WebView的CSP配置 #

VS Code WebView默认的内容安全策略（CSP）可能限制了动态样式或脚本执行，需在WebView的HTML模板中放宽相关限制，例如允许本地样式加载：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';">

3. 手动触发Angular变更检测 #

WebView环境下可能存在变更检测延迟，可在标签切换时手动触发检测：

import { Component, ChangeDetectorRef } from '@angular/core';
import { NzTabsModule } from "ng-zorro-antd/tabs";

@Component({
  standalone: true,
  imports: [NzTabsModule],
  template: `
    <nz-tabset (nzTabChange)="handleTabChange()">
      <nz-tab nzTitle="Tab 1">Content of Tab Pane 1</nz-tab>
      <nz-tab nzTitle="Tab 2">Content of Tab Pane 2</nz-tab>
      <nz-tab nzTitle="Tab 3">Content of Tab Pane 3</nz-tab>
    </nz-tabset>
  `
})
export class AppComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  handleTabChange(): void {
    this.cdr.detectChanges();
  }
}

4. 禁用标签延迟加载 #

尝试关闭nz-tabs的延迟加载特性，避免WebView环境下的渲染异常：

<nz-tabset [nzLazyLoad]="false">
  <!-- 标签内容 -->
</nz-tabset>

5. 排查样式冲突 #

VS Code WebView的默认样式可能与NG-Zorro的样式冲突，可通过WebView调试工具（按F12打开）检查标签面板的display属性，确认未激活的标签面板是否被正确设置为none。若存在冲突，可添加自定义样式强制修正：

::ng-deep .nz-tab-panel {
  display: none;
}
::ng-deep .nz-tab-panel-active {
  display: block;
}

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