// package.json { "ngPackage": { "lib": { "entryFile": "public-api.ts" } } } //public-api.ts /* * Public API Surface of Alert */ export * from './alert.component'; export * from './alert.module';
定义输入输出接下来我们就开始实现组件，首先我们定义一下组件的输入输出，alert内容我们采用投影的方式传入，Input参数支持指定alert类型、是否显示图标、alert是否可关闭，Output返回关闭回调，用于使用者处理关闭后的逻辑
import { Component, Input } from '@angular/core'; // 定义alert有哪些可选类型 export type AlertType = 'success' | 'danger' | 'warning' | 'info'; @Component({ selector: 'dev-alert', templateUrl: './alert.component.html', styleUrls: ['./alert.component.scss'], }) export class AlertComponent { // Alert 类型 @Input() type: AlertType = 'info'; // 是否显示图标，用于支持用户自定义图标 @Input() showIcon = true; // 是否可关闭 @Input() closeable = false; // 关闭回调 @Output() closeEvent: EventEmitter<boolean> = new EventEmitter<boolean>(); hide = false; constructor() {} close(){ this.closeEvent.emit(true); this.hide = true; } }
定义布局根据api定义和视觉显示我们来实现页面布局结构，布局包含一个关闭按钮、图标占位和内容投影 ，组件关闭时，我们采用清空dom的方式处理。
<div *ngIf="!hide"> <button type="button" (click)="close()" *ngIf="closeable"></button> <span *ngIf="showIcon"></span> <ng-content></ng-content> </div>
到这里，我们组件的页面布局和组件逻辑已经封装完成，根据视觉显示再加上对应的样式处理就开发完成了。
测试Alert组件 开发态引用组件组件开发过程中，我们需要能够实时调试逻辑和调整UI展示，打开根目录下的tsconfig.json，修改一下paths路径映射，方便我们在开发态就可以本地调试我们的组件，这里直接把my-lib指向了组件源码，当然也可以通过ng build my-lib --watch来使用默认的配置, 指向构建好的预发布文件，此时这里就要配置成我们修改过的目录public/my-lib/*
"paths": { "my-lib": [ "projects/my-lib/index.ts" ], "my-lib/*": [ "projects/my-lib/*" ], }
配置完成后，就可以在应用中按照npm的方式使用我们正在开发的库了，我们在app.module.ts中先导入我们的正在开发的组件，这里可以从my-lib.module导入全部组件，或者直接导入我们的AlertModule(前面已经配置支持二级入口)
import { AlertModule } from 'my-lib/alert'; // import { MyLibModule } from 'my-lib'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, // MyLibModule AlertModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
此时在app.component.html页面中就可以直接使用我们正在开发的alert组件了
<section> <dev-alert>我是一个默认类型的alert</dev-alert> </section>
打开页面，就可以看到当前开发的效果，这时候我们就可以根据页面表现来调整样式和交互逻辑，此处就不继续展示了
前面提到我们有一个单元测试文件，组件开发为了保证代码的质量和后续重构组件的稳定性，在开发组件的时候，有条件的建议加上单元测试。
由于我们调整了目录结构，我们先修改一下相关配置
// angular.json "my-lib": { ... "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "projects/my-lib/test.ts", // 这里指向调整后的文件路径 "tsConfig": "projects/my-lib/tsconfig.spec.json", "karmaConfig": "projects/my-lib/karma.conf.js" } }, } //my-lib 目录下的tsconfig.spec.json "files": [ "test.ts" // 指向当前目录下的测试入口文件 ]
下面是一个简单的测试参考，只简单测试了type类型是否正确，直接测试文件中定义了要测试的组件，场景较多的时候建议提供demo，直接使用demo进行不同场景的测试。
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { Component } from '@angular/core'; import { AlertModule } from './alert.module'; import { AlertComponent } from './alert.component'; import { By } from '@angular/platform-browser'; @Component({ template: ` <dev-alert [type]="type" [showIcon]= "showIcon"[closeable]="closeable" (closeEvent)="handleClose($event)"> <span>我是一个Alert组件</span> </dev-alert> ` }) class TestAlertComponent { type = 'info'; showIcon = false; closeable = false; clickCount = 0; handleClose(value) { this.clickCount++; } } describe('AlertComponent', () => { let component: TestAlertComponent; let fixture: ComponentFixture<TestAlertComponent>; let alertElement: HTMLElement; beforeEach(async(() => { TestBed.configureTestingModule({ imports: [AlertModule], declarations: [ TestAlertComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(TestAlertComponent); component = fixture.componentInstance; alertElement = fixture.debugElement.query(By.directive(AlertComponent)).nativeElement; fixture.detectChanges(); }); describe('alert instance test', () => { it('should create', () => { expect(component).toBeTruthy(); }); }); describe('alert type test', () => { it('Alert should has info type', () => { expect(alertElement.querySelector('.info')).not.toBe(null); }); it('Alert should has success type', () => { // 修改type，判断类型改变是否正确 component.type = 'success'; fixture.detectChanges(); expect(alertElement.querySelector('.success')).not.toBe(null); }); }
通过执行 ng test my-lib就可以执行单元测试了，默认会打开一个窗口展示我们的测试结果
到这一步，组件开发态引用、测试就完成了，功能和交互没有问题的话，就可以准备发布到npm了。
更多测试内容参考官方介绍：https://angular.cn/guide/testing
发布组件组件开发完成后，单元测试也满足我们定义的门禁指标，就可以准备发布到npm提供给其他同学使用了。