Nifty Pony Merchandise

    @bigbear713/nb-common
    TypeScript icon, indicating that this package has built-in type declarations

    13.0.0 • Public • Published

    @bigbear713/nb-common

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

    OnlineDemo

    Bug Report

    Feature Request

    Document

    Changelog


    Feature

    • 支持组件的更新策略为ChangeDetectionStrategy.OnPush;

    Version

    nb-common的大版本和Angular的大版本保持对应关系
    • "@bigbear713/nb-common":"^12.0.0" - "@angular/core": "^12.0.0"
    • "@bigbear713/nb-common":"^13.0.0" - "@angular/core": "^13.0.0"

    Installation

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

    Module

    NbCommonModule

    Common模块。引入该模块后,可使用componentdirectivepipeservice不需要引入该模块也可使用,默认为全局。

    NbCommonTestingModule

    Common测试模块。用于Unit Test。

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

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

    Services

    NbValueTypeService

    提供值类型检测的功能的service
    v12.0.0
    Methods
    Name Return Description Scenes Version
    isBoolean(value: any) value is boolean value参数是否为boolean类型的值 想要保证值为boolean类型时 v12.1.0
    isNumber(value: any) value is number value参数是否为number类型的值 想要保证值为number类型时 v12.1.0
    isObservable(value: any) value is Observable<any> value参数是否为Observable类型的值。注:Subject等也属于Observable类型的一种 想要保证值为Observable类型时 v12.0.0
    isPromise(value: any) value is Promise<any> value参数是否为Promise类型的值。 想要保证值为Promise类型时 v12.0.0
    isString(value: any) value is string value参数是否为string类型的值。注:stringString都会返回true 想要保证值为string类型时 v12.0.0
    isTemplateRef(value: any) value is TemplateRef<any> value参数是否为TemplateRef类型的值 想要保证值为TemplateRef类型时 v12.0.0
    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

    Components

    [nb-r-str]

    字符串内容渲染,支持内容为string或者异步对象
    v12.0.0
    Input
    Name Type Default Description Version
    nb-r-str string | Observable<string> | Promise<string> '' 要显示的文本内容。会自动根据内容类型,选择合适的方式渲染出来 v12.0.0
    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>

    Directives

    img[nbImg]

    在image加载完成前添加loading效果,当加载失败时会显示预设置好的图片。适合加载image文件比较大时,或者加载图片失败时不想显示破碎图片的场景
    v12.2.0
    Input
    Name Type Default Description Version
    nbImg string '' 要加载的image的src。如果使用了该指令,但是没有设置nbImg的值,会显示src属性的内容(没有loaing效果)。如果此时src的内容加载失败,会显示errImg的内容 v12.2.0
    loadingImg string | SafeResourceUrl './assets/nb-common/loading.svg' 加载image时的loading图片,支持图片路径和认证安全的url(比如svg的base64)。默认是assets/nb-common目录下的loading.svg文件,所以使用默认路径时,需要在angular.json中,项目的assets中配置,具体见下方配置。可通过DI,使用NB_DEFAULT_LOADING_IMG token, 统一设置项目中,或者某个模块中的loading图片,具体见下方Tokens定义 v12.2.0
    errImg string | SafeResourceUrl './assets/nb-common/loading.svg' 加载image失败后显示的图片,支持图片路径和认证安全的url(比如svg的base64)。默认是assets/nb-common目录下的picture.svg文件。所以使用默认路径时,需要在angular.json中,项目的assets中配置,具体见下方配置。可通过DI,使用NB_DEFAULT_ERR_IMG token, 统一设置项目中,或者某个模块中的加载失败后显示的图片,具体见下方Tokens定义 v12.2.0
    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">

    [nbPlaceholder]

    设置placeholder属性值。支持内容为stringObservable<string>类型
    v12.0.0
    Input
    Name Type Default Description Version
    nbPlaceholder string | Observable<string> '' 要显示的placeholder的内容。如果是string,将直接绑定到placeholder属性。如果是Observable<string>,将订阅它;且当订阅到值改变时,自动更新placeholder属性值 v12.0.0
    Usage
    <input nbPlaceholder="这是placeholder">
    
    <!-- placeholder$ = new BehaviorSubject('这是placeholder'); -->
    <input [nbPlaceholder]="placeholder$">

    Pipes

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

    判断值是否是异步的管道
    v12.0.0
    Params
    Name Type Mandatory Description Version
    value any true 要判断类型的值 v12.0.0
    Return
    Type Description
    value is Observable<any> | Promise<any> value是否为Observable<any>或者Promise<any>类型
    Usage
    <ng-container [ngSwitch]="content | nbIsAsync">
        <ng-container *ngSwitchCase="true">{{content | async}}</ng-container>
        <ng-container *ngSwitchDefault>{{content}}</ng-container>
    </ng-container>

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

    判断值是否是boolean类型的管道
    v12.1.0
    Params
    Name Type Mandatory Description Version
    value any true 要判断类型的值 v12.1.0
    Return
    Type Description
    value is boolean value是否为boolean或者Boolean类型
    Usage
    <ng-container [ngSwitch]="content | nbIsBoolean">
        <ng-container *ngSwitchCase="true">{{!!content}}</ng-container>
        <ng-container *ngSwitchDefault>{{content}}</ng-container>
    </ng-container>

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

    判断值是否是数字的管道
    v12.1.0
    Params
    Name Type Mandatory Description Version
    value any true 要判断类型的值 v12.1.0
    Return
    Type Description
    value is number value是否为number或者Number类型
    Usage
    <ng-container [ngSwitch]="content | nbIsNumber">
        <ng-container *ngSwitchCase="true">{{content+1}}</ng-container>
        <ng-container *ngSwitchDefault>{{+content+1}}</ng-container>
    </ng-container>

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

    判断值是否是可观察类型的管道
    v12.0.0
    Params
    Name Type Mandatory Description Version
    value any true 要判断类型的值 v12.0.0
    Return
    Type Description
    value is Observable<any> | Promise<any> value是否为Observable<any>类型
    Usage
    <ng-container [ngSwitch]="content | nbIsObservable">
        <ng-container *ngSwitchCase="true">{{content | async}}</ng-container>
        <ng-container *ngSwitchDefault>{{content}}</ng-container>
    </ng-container>

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

    判断值是否是字符串的管道
    v12.1.0
    Params
    Name Type Mandatory Description Version
    value any true 要判断类型的值 v12.1.0
    Return
    Type Description
    value is string value是否为string或者String类型
    Usage
    <ng-container [ngSwitch]="content | string">
        <ng-container *ngSwitchCase="false">{{content | async}}</ng-container>
        <ng-container *ngSwitchDefault>{{content}}</ng-container>
    </ng-container>

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

    获取TemplateRef类型的内容
    Params
    Name Type Mandatory Description Version
    value any true 要判断的值 v12.0.0
    Return
    Type Description
    TemplateRef<any> | null value为TemplateRef类型的值时,返回改值。否则返回null
    Usage
    <ng-container [ngTemplateOutlet]="content | nbTplContent"></ng-container>

    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,一起使该项目更好

    bigBear713


    License

    MIT

    Install

    npm i @bigbear713/nb-common

    DownloadsWeekly Downloads

    66

    Version

    13.0.0

    License

    MIT

    Unpacked Size

    197 kB

    Total Files

    48

    Last publish

    Collaborators

    • big-bear-713