往期回顾
以下是 Docgeni 从 2021-05-20 正式开源到目前发布的大版别更新：
Docgeni，开箱即用的 Angular 组件文档工具
喜迎国庆, Docgeni 1.1.0 正式发布！
Docgeni 2.0 发布，敞开主动化
那么自 2022 年 11 月发布 2.0 后，Docgeni 运用已经变得越来越简略，但是这条主动化之路并未停止，此次介绍一下 2.1.0 版别带来了一些新的特性:
假如你还没有给 Docgeni 仓储一个星星，请点击docgeni进入仓储后点击 Star。
示例支撑独立组件
Angular 在 v14 版别正式推出了独立组件（无模块组件）， v15 版别关于独立组件周边的生态进行了完善，那么能够说 15 版别后能够放心的运用独立组件这一特性，关于之前的版别来说，一切的组件需要挂载在一个 NgModule 上，所以 Docgeni 写示例组件的时分需要界说一个 NgModule，那么为了简化手动声明示例组件的繁琐，一起又支撑导入第三方模块以及供给 Providers，2.0 版别在module.ts新增了简化的写法：
// module.tsimport { CommonModule } from '@angular/common';import { AlibButtonModule } from '@docgeni/alib/button';
export default { imports: [ CommonModule, AlibButtonModule ], providers: [], declarations: []}
这样 Docgeni 会主动依据export default {}的元数据主动生成 NgModule，并把一切示例组件放在模块的 declarations 中，那么 Angular 支撑独立组件后，连界说一个module.ts都能够省略，一切的示例组件选用独立组件即可：
import { Component, OnInit } from '@angular/core';import { CommonModule} from '@angular/common';import { AlibButtonModule } from '@docgeni/alib/button';
@Component({ selector: 'alib-button-basic-example', templateUrl: './basic.component.html', styleUrls: ['./basic.component.scss'], standalone: true, imports: [AlibButtonModule, CommonModule]})export class AlibButtonBasicExampleComponent implements OnInit { constructor() {}
ngOnInit(): void {}}
假如你的类库已经升级到 Angular 15 版别，推荐运用独立组件编写示例，检查更多点击组件示例。
能够说独立组件在写组件示例和入门教育中的场景大有作为。
自界说组件支撑独立组件
那么除了示例组件能够省略界说义module.ts外，自界说组件此次也支撑了独立组件，无需单独界说module.ts声明导入的模块。
在.docgeni/components/color新增一个 color 组件：
import { CommonModule } from '@angular/common';import { Component, ElementRef, Input, OnInit } from '@angular/core';import { FormsModule } from '@angular/forms';import { DocgeniBuiltInComponent } from '@docgeni/template';
@Component({ selector: 'my-color', templateUrl: './color.component.html', standalone: true, imports: [FormsModule, CommonModule]})export class MyColorComponent extends DocgeniBuiltInComponent implements OnInit { @Input() set color(value: string) { this.hostElement.style.color = value; }
constructor(elementRef: ElementRef<unknown>) { super(elementRef); }
ngOnInit(): void {}}
然后就能够在文档中刺进<my-color>Color</my-color>渲染自界说独立组件。
API 文档支撑 Class 和 Interface
Docgeni 过去的版别只能生成 Angular 的组件/指令/服务 API 文档，但是在实践的场景中，往往是需要为一个类或许接口生成文档的，比方 Dialog 组件的参数装备，咱们只需要在对应的接口或许类注释中添加@public或许@publicApi的标签即可，默许一切的 Class 和 Interface 是不生成文档的。
/** * Alib Dialog Config * @public * @order 20 */export interface AlibDialogConfig { /** * The ARIA role of the dialog element. * @default 'dialog' **/ role?: DialogRole; /** * Position overrides. * @default top **/ position?: OverlayPosition;
/** Dialog size md, lg, sm*/ size?: DialogSizes;}
这样在 Dialog 组件的 API 文档中就会展示如下的接口文档：
关于 Class 的文档也是类似，一起咱们在界说 Class 或许 Interface 往往会运用承继，比方新增了一个AbstractOverlayRef笼统类，这个类会有instance和onClose笼统函数，AlibDialogRef 类是承继上述的笼统类的，那么生成的 API 文档中会主动把父类的特点和参数都合并。
export abstract class AbstractOverlayRef<T> { /** * The instance of the dialog component. **/ instance: T; abstract onClose(): void;}
/** * Alib Dialog Ref * @public * @order 30 */export abstract class AlibDialogRef<T = unknown, TResult = unknown> extends AbstractOverlayRef<T> { /** * Result of close dialog */ result: TResult;
/** * Close dialog */ close(id?: string) {}}
最终生成的文档如下所示：
API 注释装备说明
在此次版别中，新增了 API 注释标签文档，基本遵循了 TS Doc 注释规范，除个别自界说 Tag 外，点击API 注释检查更多。
其他特性
除了独立组件和接口/类的 API 文档生成以外，2.1.0 还包括了如下特性：
-
升级 Angular 站点到 v15 版别，2.1.0 版别只支撑 Angular 15 版别
-
ng add @docgeni/cli默许初始化类库装备的apiMode设置为automatic -
ng add @docgeni/cli会依据类库的 rootDir 和 sourceRoot -
修复了文档内容关于表格、标题、代码段的样式影响示例的缺点
-
修复 dg-doc-header h1 标签会和组件库的 h1 标签样式抵触的问题
-
站点支撑 tsconfig 设置
"strict": true严格模式 -
站点支撑 tsconfig 设置
"noImplicitOverride": true
破坏性更改
在 2.1 版别中，Docgeni 不会主动解析类库rootDir下的文件夹为组件
-
假如你的类库
rootDir下的文件夹便是组件，需要在include装备中新增''或许'./' -
假如你的类库
rootDir下的src文件夹下才是组件，需要在include装备中新增'src' -
假如你的类库
rootDir下的src/lib文件夹下才是组件，需要在include装备中新增'src/lib'
关于咱们
PingCode前端团队是一群酷爱开源，酷爱技能的小伙伴，除了 Docgeni 外，咱们团队还开源了多个项目：
