Angular项目Compodoc文档：隐藏公共属性等三类问题咨询

1. 无需@Ignore注解，用自定义CSS隐藏公共属性 #

完全可以通过自定义CSS实现。Compodoc生成的文档DOM结构带有明确的类名标识，你可以定位到公共属性对应的元素，通过CSS将其隐藏：

• 新建自定义CSS文件（比如compodoc-custom.css），添加样式：

/* 隐藏单个公共属性项 */
.cdoc-component-properties .cdoc-property.is-public {
  display: none;
}
/* 若要隐藏公共属性的标题区块 */
.cdoc-component-properties h3:has(.cdoc-property.is-public) {
  display: none;
}

• 生成文档时通过参数引入该文件：

npx compodoc -p tsconfig.json --custom-css ./compodoc-custom.css

注意：不同版本Compodoc的DOM类名可能略有差异，建议用浏览器开发者工具查看实际结构调整选择器。

2. 为组件添加spec.ts文件标签页（类似Source/Template/Styles） #

Compodoc默认不展示测试文件，需要通过自定义模板扩展标签页：

• 先导出Compodoc默认模板到本地：

npx compodoc -e templates

• 找到模板目录下的templates/components/component.html，在现有标签页后添加spec标签：

<mat-tab label="Spec">
  <cdoc-code-viewer [code]="component.specContent" language="typescript"></cdoc-code-viewer>
</mat-tab>

• 编写简单插件（或修改配置），在文档生成阶段读取每个组件对应的*.spec.ts文件内容，注入到component.specContent变量中，可参考Compodoc插件API的postRender阶段处理逻辑。
• 最后用自定义模板生成文档：

npx compodoc -p tsconfig.json --templates ./templates

也可以直接查找社区已有的Compodoc测试文件展示插件简化操作。

3. 实现「Example」标签页，示例代码的存放位置 #

有两种主流实现方式：

方式一：使用Compodoc原生@example注解 #

在组件的JSDoc注释中添加@example标签，Compodoc会自动生成「Example」标签页：

/**
 * 用户列表组件
 * @example
 * <!-- HTML 使用示例 -->
 * ```html
 * <app-user-list [users]="userList" (userClick)="handleUserClick($event)"></app-user-list>
 * ```
 * <!-- 组件类使用示例 -->
 * ```typescript
 * userList = [
 *   { id: 1, name: '张三' },
 *   { id: 2, name: '李四' }
 * ];
 * 
 * handleUserClick(user: User) {
 *   console.log('点击了用户:', user);
 * }
 * ```
 */
@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent {}

生成文档后，该组件会自动出现「Example」标签页展示你编写的示例代码。

方式二：自定义模板扩展Example标签页 #

如果需要更复杂的示例展示（比如嵌入可运行的示例组件），可参考第二个问题的模板修改方式，在component.html中添加「Example」标签页，再通过插件加载外部示例文件（如单独的示例组件代码、演示页面）的内容并渲染。

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