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


    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);
      }
    }
  • 相关阅读:
    李宏毅机器学习课程笔记-6.1神经网络训练问题与解决方案
    PAT甲级1055The World's Richest
    PAT甲级1028List Sorting
    PAT甲级1025PAT Ranking
    PAT甲级1016Phone Bills
    五边形数
    组合计数
    [编程题] lc三数之和 (借助哈希表)
    [编程题] 基础:如何使用大顶堆和小顶堆找topN
    [编程题] lc [剑指 Offer 54二叉搜索树的第k大节点----或者是求第K小元素]
  • 原文地址:https://www.cnblogs.com/yangzhi-blog/p/10709935.html
Copyright © 2020-2023  润新知