当前位置:   article > 正文

Angluar setter&&getter监测@Input()变化

angular 使用getter监测属性变化
import { Component,Output,Input, OnInit, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css']
})
export class PaginationComponent implements OnInit {
  private _datacount:number=0;
  private _pagesize:number=15;
  @Output() onPageChange:EventEmitter<any>=new EventEmitter();
  //@Input() datacount:number;
  @Input()
  set datacount(value:number){
    this._datacount=value;
    this.getPageCount();
    this.rebuildPagers();
  }
  get datacount(){
    return this._datacount;
  }
  @Input() pagesize:number;

  pages:Array<any>=[];
  pageCount:number=0;
  interval:any;
  constructor() { 
  }
  // public get datacount(){
  //   return this._datacount;
  // }
  // public set datacount(datacount:number){
  //   this._datacount=datacount;
  //   this.getPageCount();
  //   this.rebuildPagers();
  // }
  
  // public get pagesize(){
  //   return this._pagesize;
  // }
  // public set pagesize(pagesize:number){
  //   this._pagesize = pagesize;
  //   this.getPageCount();
  //   this.rebuildPagers();
  // }
  private currentPage:number=1;
  private showPageCount:number=10;

  
  ngOnInit() {
    this._datacount=this.datacount;
    this.getPageCount();
    this.rebuildPagers();
  }
  rebuildPagers(){
    this.pages = [];
    if (this.pageCount <= this.showPageCount) {
      for (let i = 1; i <= this.pageCount; i++) {
          this.pages.push({
              index: i,
              active: i == this.currentPage,
              text: i.toString()
          });
      }
    }
    else {
      let beforeCount = Number(Math.floor((this.showPageCount - 5) / 2));
      if (this.currentPage - beforeCount <= 2) {
        for (let i = 1; i <= 8; i++) {
          this.pages.push({
            index: i,
            active: i == this.currentPage,
            text: i.toString()
          });
        }
        this.pages.push({
          index: 0,
          active: false,
          text: '...'
        });
        this.pages.push({
          index: this.pageCount,
          active: false,
          text: this.pageCount.toString()
        });
      }
      else if (this.currentPage + beforeCount >= (this.pageCount - 1)) {
          console.log(this.currentPage + beforeCount);
          this.pages.push({
              index: 1,
              active: false,
              text: '1'
          });
          this.pages.push({
              index: 0,
              active: false,
              text: '...'
          });
          for (let i = this.pageCount - 7; i <= this.pageCount; i++) {
              this.pages.push({
                  index: i,
                  active: i == this.currentPage,
                  text: i.toString()
              });
          }
      }
      else {
          this.pages.push({
              index: 1,
              active: false,
              text: '1'
          });
          this.pages.push({
              index: 0,
              active: false,
              text: '...'
          });
          for (let i = this.currentPage - 2; i <= this.currentPage + 2; i++) {
              this.pages.push({
                  index: i,
                  active: i == this.currentPage,
                  text: i.toString()
              });
          }
          this.pages.push({
              index: 0,
              active: false,
              text: '...'
          });
          this.pages.push({
              index: this.pageCount,
              active: false,
              text: this.pageCount.toString()
          });
        }
    }
  }
  getPageCount(){
    this.pageCount = Math.ceil(this._datacount / this._pagesize);
    this.pageCount = this.pageCount || 1;
  }
  pageChange(pageindex){
    if (pageindex > this.pageCount || pageindex < 1) {
      return;
    }
    this.currentPage = Number(pageindex);
    this.rebuildPagers();
    this.onPageChange.emit(this.currentPage);
  }
  onPageInputChange(pageindex){
    let _this = this;
    clearTimeout(this.interval);
    if (pageindex > this.pageCount || pageindex < 1)
        return;
    this.interval = setTimeout(function () {
        _this.pageChange(pageindex);
    }, 1000);
  }
}

 

转载于:https://www.cnblogs.com/yangzhi-blog/p/10709935.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/223020
推荐阅读
相关标签
  

闽ICP备14008679号