Angular中如何监听DOM大小变化，并使用ngIf和第三方JS读取本地JSON属性？

本文共计1086个文字，预计阅读时间需要5分钟。

目录+页面布局+页面编号发生变更+两次请求的bug+动态设置+href+打包时如需添加一些js进行+我们的angular库引入第三方js+ngIf+属性的使用+rxjs+startWith+渲染大型列表+检测数据的变更+读取本地的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; } } 决定自己的高度的是你的态度，而不是你的才能 记得我们是终身初学者和学习者

总有一天我也能成为大佬