当前位置 : 主页 > 编程语言 > 其它开发 >

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

来源:互联网 收集:自由互联 发布时间:2022-05-30
目录 页码页数发生变化发两次请求的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;
  }
}
决定自己的高度的是你的态度,而不是你的才能 记得我们是终身初学者和学习者

总有一天我也能成为大佬

上一篇:FastDFS 海量小文件存储解决之道
下一篇:没有了
网友评论