angular 监听dom大小-ngIf-继承-窗口变化-引入第三方js-读取本地json-属性使用

目录

• 页码页数发生变化发两次请求的bug
• 动态设置 href
• 打包如果添加一些js进去
• 我们的angular库引入第三方js
• ngIf
• 属性的使用
• rxjs- startWith
• 渲染大型列表
• 检测数据的变化
• 读取本地的json
  • • 第一种
    • 第二种
• 窗口变化
• 继承的使用
• 监听dom大小处理

页码页数发生变化发两次请求的bug

ng-zorro 分页的bug

pageBool=false
// 页码请求
pageIndexChange(){
    if(!this.pageBool){
        this.getList()
    }
}
// 页数函数
pageSize(){
    this.pageNumber=1;
    this.pageBool=true;
    this.getList()
    setTimeout(()=>{this.pageBool=false})
}

动态设置 href

改成相对路径

<base href="./">

打包如果添加一些js进去

"scripts": {
    "build": "ng build && npm run copyCSS && npm run copyAssets",
    "copyCSS": "cp ./projects/kubeflow/src/kubeflow.css ./dist/kubeflow && cp ./projects/kubeflow/src/styles.scss ./dist/kubeflow && cp ./projects/kubeflow/src/lib/variables.scss ./dist/kubeflow/lib && cp ./projects/kubeflow/src/lib/fonts.scss ./dist/kubeflow/lib",
    "copyAssets": "cp -r ./projects/kubeflow/src/assets ./dist/kubeflow/assets",
  },

我们的angular库引入第三方js

npm install lodash 
我们在使用的时候
@ts-ignore
import * as _ from 'lodash'

本质就是我们的包依赖第三方的包

ngIf

<div *ngIf="bool=='xxx' as bool">
    as 就是类似赋值一个变量给子代使用  {{bool}}
</div>
or
<div *ngIf="bool;let bool1">
    as 就是类似赋值一个变量给子代使用  {{bool1}}
</div>
<ng-container *ngIf="{ a: 1, b: 2, c: 3 + 3 } as variable">
  <span>{{variable.a}}</span>
  <span>{{variable.b}}</span>
  <span>{{variable.c}}</span>
</ng-container>

属性的使用

[style.xxx]=""
[attr.xxx]=""
[class.xxx]=""

rxjs- startWith

添加一个默认值

场景1

const formGroup = new FormGroup();
const valueChanges$ = formGroup.valueChanges.pipe(
  startWith(formGroup.value)
);
valueChanges.subscribe((value) => {
    // do something
});

场景2

  a = new Subject<number>();

    this.a.pipe(
      startWith(22)
    ).subscribe(console.log) // 默认执行

渲染大型列表

• 虚拟滚动

  引入模块
  ScrollingModule
  <cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
    <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
  </cdk-virtual-scroll-viewport>
  

  .example-viewport {
    height: 200px;
    width: 200px;
    border: 1px solid black;
  }
  
  .example-item {
    height: 50px;
  }
  

  缺点: 不可搜索(不会可以通过其他方式来处理)

检测数据的变化

this.yourArray = [{...}, {...}, {...}];
this.yourArray[0].yourModifiedField = "whatever";

this.yourArray = [...this.yourArray]

读取本地的json

第一种

ts.config.json 添加

  "compilerOptions": {
    "resolveJsonModule": true+
  }

使用

import * as testJSON from './test1.json';
  const a:any=testJSON;
  console.log(a.age);

第二种

 constructor(
    private http:HttpClient
  ) {}

this.http.get('/assets/test1.json').subscribe(console.log)

窗口变化

1

<div (window:resize)="onResize($event)">
    
</div>
onResize(event) {
  event.target.innerWidth;
}

2

private changeSize = new Subject();

 constructor() {
    this.changeSize
    .pipe(
      throttleTime(1000)
    ).subscribe(innerWidth => {
        console.log('innerWidth:', innerWidth)
    });
  }

@HostListener('window:resize', ['$event.target'])
onResize(event) {
	 this.changeSize.next(target.innerWidth);
}

3

fromEvent(window, 'resize').pipe(
	debounceTime(1500),
    distinctUntilChanged()
).subscribe((event) => {
          console.log(event)
        });

继承的使用

export class ResponseHttpService extends HttpService {
  constructor(
    private configService: PlatformGlobalService,
    private httpClient: HttpClient,
    i18nService: I18NService,
    private message: NzMessageService
  ) {
    super(httpClient, i18nService);
  }


  /**
   * 获取响应策略-基本信息
   * @param strategyId
   * @returns
   */
  getResponseStrategyBasicInfo(strategyId: string | number) {
    return this.post(`/config/event/policy/${strategyId}`, null, this.configService.ctx);
  }
}

监听dom大小处理

@Directive({
  selector: '[tyTopHeightDom]'
})
export class TopHeightDomDirective implements AfterViewInit, OnDestroy {
  observer;

  constructor(private elementRef: ElementRef, private render2: Renderer2, private zone: NgZone) {
  }

  ngAfterViewInit() {
    const parentWidth = this.elementRef.nativeElement.parentElement.getBoundingClientRect().width;
    this.observer = new ResizeObserver(entries => {
     this.zone.run(() => {
              if (this.getWidth > 0) {
      			  this.render2.setStyle(this.elementRef.nativeElement, 'right', -200 - (this.getWidth - parentWidth) + 'px');
     			 }
        });
    });

    this.observer.observe(this.elementRef.nativeElement);
  }

  ngOnDestroy() {
    this.observer.unobserve(this.elementRef.nativeElement);
  }

  get getWidth(): number {
    return this.elementRef.nativeElement.getBoundingClientRect().width;
  }
}