angularjs 上拉翻页

前言

这段代码是2016年自学angular2的时候写的，现在应该已经有更好的解决办法或是其他依赖可以使用

代码

import { Component, OnInit, HostListener } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

import 'rxjs/add/operator/toPromise';
import { Item } from './item';
import { ItemService } from '../services/item.service';

@Component({
    selector:'index',
    templateUrl:'javascripts/index/index.component.html',
    styleUrls:['javascripts/index/index.component.css']
})

export class IndexComponent implements OnInit{

    constructor(private route: ActivatedRoute, private itemSearch: ItemService, private router: Router){}

    category:string;
    keyWord:string;
    oldKeyWord:string;
    oldCategory:string;
    items:Item[]=[];
    page:number=1;
    pageEnd:boolean=false;
    pageSts:string="paged"


    /*bundScroll(reset):void{
        var $ = window['$'];
        $(window).off('scroll');
        $(window).on('scroll', this.contentScroll);
        if(reset==1){
            $('body').scrollTop(0);
        }
    }

    contentScroll():void{
        var $ = window['$'];
        var wheight = document.body.scrollHeight,//网页高度
            scrollTop = $('body').scrollTop(),//滚动高度
            vheight = document.body.offsetHeight;

        if(wheight - vheight - scrollTop < 100){
            $(window).off('scroll');
            // console.log('wheight:'+wheight, vheight, 'scrollTop:'+scrollTop);
            $('.footer').click();
        }
    }*/

    ngOnInit():void{
        var $ = window['$'];
        // this.bundScroll(1);
        this.route.params.forEach((params: Params) => {
            this.category = params['category'];
            this.keyWord = params['keyword'];
        });
        if(!this.keyWord&&!this.category)
            this.category = 'all';
        //this.doPage();

    }

    ngDoCheck() {
        var changed = false;
        if (this.category !== this.oldCategory) {
            changed = true;
            this.itemSearch.searchByCategory(this.category,this.page).then(items=>this.items = items);
            this.oldCategory = this.category;
            this.keyWord == null;
            this.oldKeyWord = null;
        }
        if(this.keyWord != this.oldKeyWord){
            changed=true;
            this.itemSearch.searchByKeyWord(this.keyWord,this.category,this.page).then(items=>this.items = items);
            this.oldKeyWord = this.keyWord;
        }
        if(changed){
            this.pageEnd = false;
            this.page = 1;
            //this.bundScroll(0);
        }
    }

    @HostListener('window:scroll')
    apage(){
        if(this.pageSts == 'paged'){
            var wheight = document.body.scrollHeight,//网页高度
                scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop,//滚动高度
                vheight = document.body.offsetHeight;
            if(wheight - vheight - scrollTop < 100){
                this.pageSts = 'paging';
                this.doPage();
            }
        }
    }

    doPage(){
        if(!this.pageEnd){
            this.page++;
            if(this.keyWord){
                this.itemSearch.searchByKeyWord(this.keyWord,this.category,this.page)
                    .then(items=>{
                        this.pageEnd = items.length == 0;
                        if(this.page%10 == 1){
                            this.items=items;
                        }else{
                            this.items=this.items.concat(items)
                        }
                        this.pageSts='paged'
                    })
                    //.then(()=>this.bundScroll(this.page%10));
            }else{
                this.itemSearch.searchByCategory(this.category, this.page)
                    .then(items=>{
                        this.pageEnd = items.length == 0;
                        if(this.page%10 == 1){
                            this.items=items;
                        }else{
                            this.items=this.items.concat(items)
                        }
                        this.pageSts='paged'
                    })
                    //.then(()=>this.bundScroll(this.page%10));
            }
        }
    }
}