当前位置: 首页 > 工具软件 > ng-zorro-antd > 使用案例 >

前端知识之angular组件库之NG-ZORRO-ANTD结构窥探(一)components

堵彬彬
2023-12-01

ng-zorro-antd 结构窥探

项目目录结构

cdk

Component Development Kit

The Component Dev Kit (CDK) is a set of behavior primitives for building UI components.

参考链接

1.angualr material ui

components

存放组件以及命令的目录

Core

项目组件中的公共方法集合地

util

里面封装了框架中使用到的共用组件和方法

  • Array

    export function toArray<T>(value: T | T[]): T[] {
      let ret: T[];
      if (value == null) {
        ret = [];
      } else if (!Array.isArray(value)) {
        ret = [value];
      } else {
        ret = value;
      }
      return ret;
    }
    
    export function arraysEqual<T>(array1: T[], array2: T[]): boolean {
      if (!array1 || !array2 || array1.length !== array2.length) {
        return false;
      }
    
      const len = array1.length;
      for (let i = 0; i < len; i++) {
        if (array1[i] !== array2[i]) {
          return false;
        }
      }
      return true;
    }
    
    export function shallowCopyArray<T>(source: T[]): T[] {
      return source.slice();
    }
    
    
  • Check

    export function isNotNil<T>(value: T): value is NonNullable<T> {
      return typeof value !== 'undefined' && value !== null;
    }
    
    export function isNil(value: unknown): value is null | undefined {
      return typeof value === 'undefined' || value === null;
    }
    
    /**
     * Examine if two objects are shallowly equaled.
     */
    export function shallowEqual(objA?: any, objB?: any): boolean {
      if (objA === objB) {
        return true;
      }
    
      if (typeof objA !== 'object' || !objA || typeof objB !== 'object' || !objB) {
        return false;
      }
    
      const keysA = Object.keys(objA);
      const keysB = Object.keys(objB);
    
      if (keysA.length !== keysB.length) {
        return false;
      }
    
      const bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
    
      // tslint:disable-next-line:prefer-for-of
      for (let idx = 0; idx < keysA.length; idx++) {
        const key = keysA[idx];
        if (!bHasOwnProperty(key)) {
          return false;
        }
        if (objA[key] !== objB[key]) {
          return false;
        }
      }
    
      return true;
    }
    
    export function isNonEmptyString(value: any): boolean {
      return typeof value === 'string' && value !== '';
    }
    
  • convert

    其中使用到了angular中的cdk/coercion

    /**
     * Get the function-property type's value
     */
    export function valueFunctionProp<T>(prop: FunctionProp<T> | T, ...args: NzSafeAny[]): T {
      return typeof prop === 'function' ? (prop as FunctionProp<T>)(...args) : prop;
    }
    
    function propDecoratorFactory<T, D>(name: string, fallback: (v: T) => D): (target: NzSafeAny, propName: string) => void {
      function propDecorator(target: NzSafeAny, propName: string, originalDescriptor?: TypedPropertyDescriptor<NzSafeAny>): NzSafeAny {
        const privatePropName = `$$__${propName}`;
    
        if (Object.prototype.hasOwnProperty.call(target, privatePropName)) {
          warn(`The prop "${privatePropName}" is already exist, it will be overrided by ${name} decorator.`);
        }
    
        Object.defineProperty(target, privatePropName, {
          configurable: true,
          writable: true
        });
    
        return {
          get(): string {
            return originalDescriptor && originalDescriptor.get ? originalDescriptor.get.bind(this)() : this[privatePropName];
          },
          set(value: T): void {
            if (originalDescriptor && originalDescriptor.set) {
              originalDescriptor.set.bind(this)(fallback(value));
            }
            this[privatePropName] = fallback(value);
          }
        };
      }
    
      return propDecorator;
    }
    
    /**
     * Input decorator that handle a prop to do get/set automatically with toBoolean
     *
     * Why not using @InputBoolean alone without @Input? AOT needs @Input to be visible
     *
     * @howToUse
     * ```
     * @Input() @InputBoolean() visible: boolean = false;
     *
     * // Act as below:
     * // @Input()
     * // get visible() { return this.__visible; }
     * // set visible(value) { this.__visible = value; }
     * // __visible = false;
     * ```
     */
    export function InputBoolean(): NzSafeAny {
      return propDecoratorFactory('InputBoolean', toBoolean);
    }
    
    export function InputCssPixel(): NzSafeAny {
      return propDecoratorFactory('InputCssPixel', toCssPixel);
    }
    
    export function InputNumber(fallbackValue?: NzSafeAny): NzSafeAny {
      return propDecoratorFactory('InputNumber', (value: string | number) => toNumber(value, fallbackValue));
    }
    
    
animation

ng-zorro-ant中使用的动画

    <div
      class="ant-collapse-content"
      [class.ant-collapse-content-active]="nzActive"
      [@.disabled]="noAnimation?.nzNoAnimation"
      [@collapseMotion]="nzActive ? 'expanded' : 'hidden'"
    >
      <div class="ant-collapse-content-box">
        <ng-content></ng-content>
      </div>
    </div>

自己使用动画

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { collapseMotion, fadeMotion, moveUpMotion } from 'ng-zorro-antd';

@Component({
  selector: 'app-animations',
  templateUrl: './animations.component.html',
  styleUrls: ['./animations.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [collapseMotion],
})
export class AnimationsComponent implements OnInit {
  isActive = false;
  constructor() { }
  ngOnInit() {}
}

点击.fade-header content内容就会展开

<div class="fade-header" (click)="isActive=!isActive">
  <i nz-icon [nzType]="isActive ? 'down' : 'up'" nzTheme="outline"></i> Collapsed Header
</div>
<div class="content" [@collapseMotion]="isActive ? 'expanded' : 'hidden' ">
  <p>content</p>
  <p>content</p>
</div>
message

cdk

tree

nz-tree-base-util.ts

export function isCheckDisabled(node: NzTreeNode): boolean {
  const { isDisabled, isDisableCheckbox } = node;
  return !!(isDisabled || isDisableCheckbox);
}

“!”是逻辑与运算,并且可以与任何变量进行逻辑与将其转化为布尔值,“!!”则是逻辑与的取反运算,尤其后者在判断类型时代码简洁高效,省去了多次判断null、undefined和空字符串的冗余代码

var a;
if(a!=null&&typeof(a)!=undefined&&a!=''){
    //a有内容才执行的代码  
}

// 等价于
if(!!a){
    //a有内容才执行的代码...  
}
Color

内置了几种常用的颜色

export const presetColors = [
  'pink',
  'red',
  'yellow',
  'orange',
  'cyan',
  'green',
  'blue',
  'purple',
  'geekblue',
  'magenta',
  'volcano',
  'gold',
  'lime'
] as const;

export type NzPresetColor = typeof presetColors[number];

export function isPresetColor(color: string): color is NzPresetColor {
  return presetColors.indexOf(color as NzSafeAny) !== -1;
}

参考

1.angular - simplejason 个人主页

2.Angular 练级之旅(6)-CDK的使用

3. angular material design

4.使用 Angular CDK 技术来创建一个消息推送服务(toast service)

 类似资料: