angular 監聽dom大小-ngIf-繼承-窗口變化-引入第三方js-讀取本地json-屬性使用

頁碼頁數發生變化發兩次請求的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;
  }
}