Angular日常记录（会用还不够，关键理解）

最新推荐文章于 2022-12-24 18:48:04 发布

weixin_33972649

最新推荐文章于 2022-12-24 18:48:04 发布

阅读量78

点赞数

原文链接：https://my.oschina.net/u/2949632/blog/1634880

版权

2019独角兽企业重金招聘Python工程师标准>>>

关键字：提供商(providers)、指令结构写法、抽象类Validator

下面通过自定义表单验证器代码拆分讲解

const UUID_VALIDATOR: any = {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => UUIDValidator),
  multi: true
};

@Directive({
  selector: '[uuid][formControlName],[uuid][formControl],[uuid][ngModel]',
  providers: [UUID_VALIDATOR]
})
export class UUIDValidator implements Validator, OnInit, OnChanges {
  @Input() uuid;

  private validator: ValidatorFn;
  private onChange: () => void;

  ngOnInit() {
    this.validator = uuid(this.uuid);
  }

  ngOnChanges(changes: SimpleChanges) {
    for (const key in changes) {
      if (key === 'uuid') {
        this.validator = uuid(changes[key].currentValue);
        if (this.onChange) {
          this.onChange();
        }
      }
    }
  }

  validate(c: AbstractControl): {[key: string]: any} {
    return this.validator(c);
  }

  registerOnValidatorChange(fn: () => void): void {
    this.onChange = fn;
  }
}

周日补充

Forward Reference

自定义验证指令 @Attribute() 指令扩展用法

掌握Angular2的依赖注入 useExisting useClass usevale等别名注入

Angular 2 Multi Providers

Angular2 依赖注入之实例化过程

[][]估计是要都存在的情况下指令才生效

关键字：aot编译报错、linux

这是window下aot编译angular项目（ng build）出现的警告，警告过后仍可以正常打包。

公司运维在linux环境通过jenkies工具自动化打包这个警告就变成报错，原因是linux严格区分大小写，而windows不区分。

出现这种情况是因为对于第三方的UI库进行扩展的时候，把文件直接拷贝出来进行修改，一旦UI库维护更新了文件名称如大小变成小写，拷贝的代码还是大写路径。

关键字：路由复用

项目遇到一种需求，表格数据量大的时候在表格内部肯定会出现滚动条，现在想在切换路由的时候保证表格内部滚动条原封不动的在那个位置。目前想到的仅仅是识别内部距顶位置作为记录，每次切换再滚动一遍。

先说说路由复用解决的问题：

后台系统本质是解决不同路由页切换时组件数据不丢失问题（减少网络请求）
入场动画或路由动画不会多次触发（组件及其状态通过路由快照被保存起来，组件不会再次实例化/初始化，生命周期也不会重新触发）
符合tab页组件的切换

一句话概括，angular通过路由策略使用<router-outlet>作为容器加载/渲染不同的页面组件，此处的组件应该是一个ng-template的壳装载，通过路由复用策略五个方法（抽象类）去进行路由复用，替换->缓存->重用就是整体的核心了

五个方法

shouldDetach 直接返回 true 表示对所有路由允许复用
store 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象；path等同RouterModule.forRoot中的配置。
shouldAttach 若 path 在缓存中有的都认为允许还原路由
retrieve 从缓存中获取快照，若无则返回null
shouldReuseRoute 进入路由触发，判断是否同一路由

angular路由复用组件参考ng-alain

关键字：模块预加载(PreloadingStrategy)的控制和实现(https://blog.csdn.net/happykala/article/details/77945000)

(1)preloadingStrategy: PreloadAllModules——使用angular内置的加载策略一次性预加载所有的模块，也就是对应的工厂函数文件，以便于跳转到指定模块会实例化对应的组件

(2)自定义预加载策略（自行在路由配置那些需要预加载），无预加载的模块会在进入的时候才会加载，提高首次进入的速度

import {Route,PreloadingStrategy } from '@angular/router';
import { Observable } from 'rxjs';
import 'rxjs/add/observable/of';
/**
 * 自定义的路由加载策略，在定义中定义data其中的属性preload为真的时候这个模块蔡需要被预先加载
 */
export class CustomPreloadingStrategy implements PreloadingStrategy{
    preload(route: Route, fn: () => Observable<any>): Observable<any>{
        return route.data&&route.data.preload?fn():Observable.of(null);
    }
}

转载于:https://my.oschina.net/u/2949632/blog/1634880