@bigbear713/nb-common v17.0.0

@bigbear713/nb-common

Angular common lib by bigBear713, include some common component, directive, pipe, service.

OnlineDemo

Bug Report

Feature Request

Document

• 中文
• English

Changelog

• 中文
• English

Feature

• 支持组件的更新策略为ChangeDetectionStrategy.OnPush;
• 支持在standalone component中使用;
• 支持以standalone component的方式引入;

Version

nb-common的大版本和Angular的大版本保持对应关系

Installation

$ npm i @bigbear713/nb-common
// or
$ yarn add @bigbear713/nb-common

API

Module

NbCommonModule

Common模块。引入该模块后，可使用component，directive，pipe。service不需要引入该模块也可使用，默认为全局。

NbCommonTestingModule

Common测试模块。用于Unit Test。

function getTplRefInstance(TestBed: TestBedStatic) {fixture:ComponentFixture;component: TemplateRefTestingComponent;tplRef: TemplateRef}

获取templateRef的fixture, component, tplRef等，可用于快速获取TemplateRef类型的实例，方便Unit Test. 需先引入NbCommonTestingModule

Services

NbValueTypeService

v12.0.0

提供值类型检测的功能的service。

Methods

Usage

constructor(private valueType: NbValueTypeService) {}

this.valueType.isBoolean(new Boolean(false)); // true
this.valueType.isBoolean(false); // true
this.valueType.isObservable({}); // false

this.valueType.isNumber(new Number(1)); // true
this.valueType.isNumber(1); // true
this.valueType.isObservable({}); // false

this.valueType.isObservable(new Subject()); // true
this.valueType.isObservable({}); // false

this.valueType.isObservable(new Subject()); // true
this.valueType.isObservable({}); // false

this.valueType.isPromise(Promise.resolve()); // true
this.valueType.isPromise({}); // false

this.valueType.isString(new String('')); // true
this.valueType.isString('')); // true
this.valueType.isString({}); // false

@ViewChild('tplRef') tplRef!: TemplateRef<any>;
this.valueType.isTemplateRef(tplRef); // true
this.valueType.isTemplateRef({}); // false

NbUnsubscribeService

v16.0.0

提供取消rxjs订阅的功能的service。

• 请在component/directive的providers中使用；或者在实例销毁时，主动调用该服务实例的ngOnDestroy
• 将永远不会通过构造函数引入依赖项

Methods

Usage

// 服务实例的创建和销毁
// 设为component/directive级的服务，在component/directive实例被销毁时，也会自动销毁该服务实例，取消所有订阅事件
@Component({template:'',providers:[NbUnsubscribeService]}) export class XXXComponent{}
@Directive({providers:[NbUnsubscribeService]}) export class XXXDirective{}

// 如果无法设置为component/directive级的服务，可手动实例化，并在需要时手动取消所有订阅事件，比如在pipe中。
// 将永远不会通过构造函数引入依赖项
@Pipe() export class XXXPipe(){
  private unsubscribeService:NbUnsubscribeService;
  constructor(){
    this.unsubscribeService = new NbUnsubscribeService();
  }

  ngOnDestroy(){
    this.unsubscribeService.ngOnDestroy();
  }
}

// 使用
constructor(private unsubscribeService: NbUnsubscribeService) {}

const interval$ = this.unsubscribeService.addUnsubscribeOperator(interval(1000));

const interval$ = interval(1000).pipe(takeUntil(this.unsubscribeService.getDestructionSignal()));
this.unsubscribeService.getDestructionSignal().subscribe(()=>{
  // ...
});

const subscription = interval(1000).subscribe();
this.unsubscribeService.collectASubscription(subscription);

this.unsubscribeService.clearAllSubscriptions();

const subscription = interval(1000).subscribe();
const subKey = 'interval subscription';
// 当key对应的记录已经存在时，默认会先对之前存储的订阅事件进行取消订阅操作
this.unsubscribeService.collectASubscriptionByKey(subKey,subscription);
// 等价于
this.unsubscribeService.collectASubscriptionByKey(subKey,subscription,true);
// 如果显式设置unsubscribeIfExist = false，则当key对应的记录已经存在时，会直接覆盖存储，不会先对之前的订阅事件进行取消操作。
// 此时应注意自己控制订阅事件的取消
this.unsubscribeService.collectASubscriptionByKey(subKey,subscription,false);

// 当key对应的记录已经存在时，function最终会返回这个记录数据
const subscription = this.unsubscribeService.collectASubscriptionByKey(subKey,subscription);

this.unsubscribeService.unsubscribeASubscriptionByKey(subKey);

this.unsubscribeService.clearAllSubscriptionsFromKeyRecord();

// 在需要的时候，调用ngOnDestroy()来取消所有订阅事件
this.unsubscribeService.ngOnDestroy();

Components

[nb-r-str]

v12.0.0

从v15.1.0开始为standalone component

字符串内容渲染，支持内容为string或者异步对象

Input

Usage

<span nb-r-str="string content"></span>

<!-- observableDemo$ = new BehaviorSubject<string>('1'); -->
<span [nb-r-str]="observableDemo$"></span>

<!-- promiseDemo = Promise.resolve('1'); -->
<span [nb-r-str]="promiseDemo"></span>

// v15.1.0新增
// 在NgModule中引入
@NgModule({
  imports:[NbRStrComponent],
  // ...
})
export class XXXModule{}

// 在standalone component中引入
@Component({
  standalone:true,
  imports:[NbRStrComponent],
  // ...
})
export class XXXComponent{}

Directives

img[nbImg]

v12.2.0

从v15.1.0开始为standalone component

在image加载完成前添加loading效果，当加载失败时会显示预设置好的图片。适合加载image文件比较大时，或者加载图片失败时不想显示破碎图片的场景

Input

angular.json

 "projects": {
    "xxx": {
      // ...
      "architect": {
        // ...
        "build": {
          // ...
          "options": {
            // ...
            "assets": [
              // ...
              {
                "glob": "**/*",
                "input": "./node_modules/@bigbear713/nb-common/assets/",
                "output": "/assets/"
              }
            ]
          }
        }
      }
    }
  },

Usage

<!-- 只设置"nbImg"，加载失败时会显示默认图片 -->
<img [nbImg]="bigImg">

<!-- 自定义loading图片 -->
<img [nbImg]="bigImg" [loadingImg]="loadingImg">

<!-- 加载失败时显示自定义图片 -->
<img nbImg="invalidImg" [errImg]="errImg">

<!-- 只想要加载失败时，显示默认图片(如果想显示其他图片，可设置errImg属性)，不需要loading效果 -->
<img src="invalidImg" nbImg [errImg]="errImg">

// v15.1.0新增
// 在NgModule中引入
@NgModule({
  imports:[NbImgDirective],
  // ...
})
export class XXXModule{}

// 在standalone component中引入
@Component({
  standalone:true,
  imports:[NbImgDirective],
  // ...
})
export class XXXComponent{}

[nbPlaceholder]

v12.0.0

从v15.1.0开始为standalone component

设置placeholder属性值。支持内容为string和Observable<string>类型

Input

Usage

<input nbPlaceholder="这是placeholder">

<!-- placeholder$ = new BehaviorSubject('这是placeholder'); -->
<input [nbPlaceholder]="placeholder$">

// v15.1.0新增
// 在NgModule中引入
@NgModule({
  imports:[NbPlaceholderDirective],
  // ...
})
export class XXXModule{}

// 在standalone component中引入
@Component({
  standalone:true,
  imports:[NbPlaceholderDirective],
  // ...
})
export class XXXComponent{}

Pipes

nbIsAsync: transform(value: any): value is Observable<any> | Promise<any>

v12.0.0

从v15.1.0开始为standalone component

判断值是否是异步的管道

Params

Return

Usage

<ng-container [ngSwitch]="content | nbIsAsync">
    <ng-container *ngSwitchCase="true">{{content | async}}</ng-container>
    <ng-container *ngSwitchDefault>{{content}}</ng-container>
</ng-container>

// v15.1.0新增
// 在NgModule中引入
@NgModule({
  imports:[NbIsAsyncPipe],
  // ...
})
export class XXXModule{}

// 在standalone component中引入
@Component({
  standalone:true,
  imports:[NbIsAsyncPipe],
  // ...
})
export class XXXComponent{}

nbIsBoolean: transform(value: any): value is boolean

v12.1.0

从v15.1.0开始为standalone component

判断值是否是boolean类型的管道

Params

Return

Usage

<ng-container [ngSwitch]="content | nbIsBoolean">
    <ng-container *ngSwitchCase="true">{{!!content}}</ng-container>
    <ng-container *ngSwitchDefault>{{content}}</ng-container>
</ng-container>

// v15.1.0新增
// 在NgModule中引入
@NgModule({
  imports:[NbIsBooleanPipe],
  // ...
})
export class XXXModule{}

// 在standalone component中引入
@Component({
  standalone:true,
  imports:[NbIsBooleanPipe],
  // ...
})
export class XXXComponent{}

nbIsNumber: transform(value: any): value is number

v12.1.0

从v15.1.0开始为standalone component

判断值是否是数字的管道

Params

Return

Usage

<ng-container [ngSwitch]="content | nbIsNumber">
    <ng-container *ngSwitchCase="true">{{content+1}}</ng-container>
    <ng-container *ngSwitchDefault>{{+content+1}}</ng-container>
</ng-container>

// v15.1.0新增
// 在NgModule中引入
@NgModule({
  imports:[NbIsNumberPipe],
  // ...
})
export class XXXModule{}

// 在standalone component中引入
@Component({
  standalone:true,
  imports:[NbIsNumberPipe],
  // ...
})
export class XXXComponent{}

nbIsObservable: transform(value: any): value is Observable<any>

v12.0.0

从v15.1.0开始为standalone component

判断值是否是可观察类型的管道

Params

Return

Usage

<ng-container [ngSwitch]="content | nbIsObservable">
    <ng-container *ngSwitchCase="true">{{content | async}}</ng-container>
    <ng-container *ngSwitchDefault>{{content}}</ng-container>
</ng-container>

// v15.1.0新增
// 在NgModule中引入
@NgModule({
  imports:[NbIsObservablePipe],
  // ...
})
export class XXXModule{}

// 在standalone component中引入
@Component({
  standalone:true,
  imports:[NbIsObservablePipe],
  // ...
})
export class XXXComponent{}

nbIsString: transform(value: any): value is string

v12.1.0

从v15.1.0开始为standalone component

判断值是否是字符串的管道

Params

Return

Usage

<ng-container [ngSwitch]="content | string">
    <ng-container *ngSwitchCase="false">{{content | async}}</ng-container>
    <ng-container *ngSwitchDefault>{{content}}</ng-container>
</ng-container>

// v15.1.0新增
// 在NgModule中引入
@NgModule({
  imports:[NbIsStringPipe],
  // ...
})
export class XXXModule{}

// 在standalone component中引入
@Component({
  standalone:true,
  imports:[NbIsStringPipe],
  // ...
})
export class XXXComponent{}

nbTplContent: transform(value: any): TemplateRef<any> | null

v12.0.0

从v15.1.0开始为standalone component

获取TemplateRef类型的内容

Params

Return

Usage

<ng-container [ngTemplateOutlet]="content | nbTplContent"></ng-container>

// v15.1.0新增
// 在NgModule中引入
@NgModule({
  imports:[NbTplContentPipe],
  // ...
})
export class XXXModule{}

// 在standalone component中引入
@Component({
  standalone:true,
  imports:[NbTplContentPipe],
  // ...
})
export class XXXComponent{}

nbCallFn: transform(fn: Function, ...args: any): any｜undefined

v16.2.0

调用指定的function的管道

Params

Return

Usage

// template content
`<div>{{testFn:nbCallFn:val1:val2}}</div>`

  val1 = 1;
  val2 = 2;

  testFn(val1,val2){
    return val1+val2;
  }

  
// template content
`
<button (click)="addItem()">Add a item</button>
<div>{{toStr:nbCallFn:arr}}</div>
`

  arr = [1,2,3];

  toStr(arr){
    return arr.join();
  }
  addItem(){
    this.arr.push(this.arr.length+1);
    // 需要创建一个新的值，并赋值
    this.arr = [...this.arr];
  }

// 在NgModule中引入
@NgModule({
  imports:[NbCallFnPipe],
  // ...
})
export class XXXModule{}

// 在standalone component中引入
@Component({
  standalone:true,
  imports:[NbCallFnPipe],
  // ...
})
export class XXXComponent{}

// 也可通过引入NbCommonModule使用
@NgModule({
  imports:[NbCommonModule],
  // ...
})
export class XXXModule{}

Tokens

NB_DEFAULT_LOADING_IMG

string | SafeResourceUrl

v12.2.0

用于设置加载image时“默认”显示的loading图片，配合img[nbImg]指令使用。结合DI，避免重复设置每个img[nbImg]的loadingImg。

Usage

  providers: [
    // ...
    {
      provide: NB_DEFAULT_LOADING_IMG,
      useValue: '/assets/loading.svg'
    }
    // OR
    {
      provide: NB_DEFAULT_LOADING_IMG,
      useFactory: (domSanitizer: DomSanitizer) => {
        return domSanitizer.bypassSecurityTrustResourceUrl('data:image/svg+xml;base64,PHN2ZyB4b...')
      },
      deps: [DomSanitizer]
    }
    // ...
  ]

NB_DEFAULT_ERR_IMG

string | SafeResourceUrl

v12.2.0

用于设置加载image失败后“默认”显示的图片，避免显示破碎图片，配合img[nbImg]指令使用。结合DI，避免重复设置每个img[nbImg]的errImg。

Usage

  providers: [
    // ...
    {
      provide: NB_DEFAULT_ERR_IMG,
      useValue: '/assets/picture.svg'
    }
    // OR
    {
      provide: NB_DEFAULT_ERR_IMG,
      useFactory: (domSanitizer: DomSanitizer) => {
        return domSanitizer.bypassSecurityTrustResourceUrl('data:image/svg+xml;base64,PHN2ZyB4b...')
      },
      deps: [DomSanitizer]
    }
    // ...
  ]

贡献

欢迎提feature和PR，一起使该项目更好

License

MIT