如何在重建url后從URL傳遞過濾器值，目標是使用Angular2和Typescript實現無限滾動？

Question

我有一個搜索頁面，您可以在其中搜索書籍並應用多個過濾器。 在allpying過濾器上，我將URL中的請求發送到服務器。 我已經使用以下javascript實現了 - >

$(document).ready(function(){
var base_url = 'https://'+window.location.hostname;
var url = base_url+'/books/search/';
var next_url = base_url+'/books/search/next/';
var filter_url = base_url+'/books/search/filter/';
var search_input = $('.search-bar input');

var bookSeach = {

    searchQueryAsString : function(el){
        var id = $(el).attr('id');
        var id = id.substr(id.lastIndexOf('_')+1)
        var filter_type = $(el).closest('ul.p-search-var-items').attr('filter-type')
        var name = $(el).val();
        $('#'+filter_type+'_id').val(id)
        $('#'+filter_type+'_name').val(name)
        return this.buildSearchQuery()
    },

    searchQueryAsArray : function(el){

        el.find('input:checkbox:checked').each(function(){
            var filter=$(this).closest('.p-search-var-items').attr('filter-type')
            var id = $(this).attr('id')
            var name = $(this).val()
            id = id.substr(id.lastIndexOf('_')+1)
            var value = $('#'+filter+'_id').val()!='' ?$('#'+filter+'_id').val()+','+id : id
            $('#'+filter+'_id').val(value)
            var nvalue = $('#'+filter+'_name').val()!='' ?$('#'+filter+'_name').val()+','+name : name
            $('#'+filter+'_name').val(nvalue)
        })
        return this.buildSearchQuery()
    },

    buildSearchQuery : function(){
        var self = this;
        var query_url = base_url+'/books/search/';
        $('input.filter_value').each(function(){
            var el = $(this);
            if(el.val()!=''){
                value = $.trim(el.val())
                query_url = self.updateQueryStringParameter(query_url,el.attr('id'),value)
                next_url = self.updateQueryStringParameter(next_url,el.attr('id'),value)
                filter_url = self.updateQueryStringParameter(filter_url,el.attr('id'),value)
            }
        })
        return {'url':query_url,'next_url':next_url,'filter_url':filter_url};
    },

    updateQueryStringParameter : function(uri, key, value) {
      var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
      var separator = uri.indexOf('?') !== -1 ? "&" : "?";
      if (uri.match(re)) {
        return uri.replace(re, '$1' + key + "=" + value + '$2');
      }
      else {
        return uri + separator + key + "=" + value;
      }
    },

    filterText : function (elem) {
        var value = elem.val().toLowerCase();
        var filter = elem.attr('data-filter')
        $(".p-search-var-items[filter-type='"+filter+"'] > li").each(function() {
            if ($(this).text().toLowerCase().search(value) > -1) {
                $(this).show();
            }
            else {
                $(this).hide();
            }
        });
    },

    loadBooksOnScroll : function(count){
        var ajax_url = bookSeach.buildSearchQuery()
        if($('#dropdownMenu1').attr('data-filter-applied')!=''){
            ajax_url = ajax_url['filter_url']
            data = {'index':count,'type':$('#dropdownMenu1').attr('data-filter-applied')}
        }else{
            ajax_url = ajax_url['next_url']
            data = {'index':count}

        }
        this.ajaxHandler(ajax_url,'GET',data,this.renderBookList)
    },
    loadBooksOnSort : function(type){
        var ajax_url = bookSeach.buildSearchQuery()
        ajax_url = ajax_url['filter_url']
        this.ajaxHandler(ajax_url,'GET',{'index':0,'type':type},function(response){
            $('.p-result').html('')
            bookSeach.renderBookList(response)
        })
    },
    ajaxHandler : function(url,method,data,callback){
        $.ajax({
            'url':url,
            'type':method,
            'data':data,
            'success':function(response){
                if(response){
                    callback(response)
                }
            }
        })
    },

    filterContentByKeyWord: function(key,type){
        var keyword = {}
        keyword[type+'_key']=key
        var ajax_url = base_url+'/'+type+'s/search/';
        this.ajaxHandler(ajax_url,'GET',keyword,function(result){
            bookSeach.renderFilterContent(result,type)
        })
    },

    renderFilterContent: function(results,type){
        $('.'+type+'-results').html('')
        var template =_.template($('#'+type+'_template').html())
        var id = this.getUrlParameter(type+'_id')
        console.log(id, results,id)
        $('.'+type+'-results').append(template({'results':results,'id':id}))
    },

    renderBookList : function(books){
        var template =_.template($('#book_detail').html())
        $('.p-result').append(template({'books':books}))
    },

    removeParameter : function(url, parameter){

      var urlparts= url.split('?');

      if (urlparts.length>=2)
      {
          var urlBase=urlparts.shift(); //get first part, and remove from array
          var queryString=urlparts.join("?"); //join it back up

          var prefix = encodeURIComponent(parameter)+'=';
          var pars = queryString.split(/[&;]/g);
          for (var i= pars.length; i-->0;)
              if (pars[i].lastIndexOf(prefix, 0)!==-1)   //idiom for string.startsWith
                  pars.splice(i, 1);
          url = urlBase+'?'+pars.join('&');
      }
      return url;
    },

    getUrlParameter : function(sParam){
        var sPageURL = window.location.search.substring(1);
        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < sURLVariables.length; i++)
        {
            var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == sParam)
            {
                return sParameterName[1];
            }
        }
    }

};

// Search within filters by keyword - START

//Delay function to prevent calling the function on every key press
var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

//On keyup for search within filters
$('.p-search-cat-box').on('keyup',function(){
    var self = this
    delay(function(){
        var filter = $(self).attr('data-filter');
        if(filter=='author' || filter=='publisher' || filter=='seller' || filter=='institute'){
            $('#'+filter+'_key').val($(self).val())
            bookSeach.filterContentByKeyWord($(self).val(),filter)
        }else{
            bookSeach.filterText($(self))
        }
    }, 600 )

});

// Search within filters by keyword - END


//Filters on change event  - START

// For category and sub category
$('.p-search-var-items input:radio').on('change',function(){
    var redirect_url = bookSeach.searchQueryAsString($(this))
    window.location.href = redirect_url['url'];
})

// For Authors, Publishers and Binding
$(document).on('change','.p-search-var-items input:checkbox',function(){
    elem = $(this)
    el = elem.closest('.p-search-var-items')
    $('#'+el.attr('filter-type')+'_id').val('')
    $('#'+el.attr('filter-type')+'_name').val('')
    var redirect_url = bookSeach.searchQueryAsArray(elem.closest('.p-search-cat-list'))
    window.location.href = redirect_url['url'];
})

//Filters on change event  - END

// Filters - collapse up and down - START

$('.filter-container .p-sub-cat i').on('click',function(){
    if($(this).hasClass('fa-minus')){
        $(this).closest('.filter-container').find('.p-search-cat').hide("slide",{direction:'up'},500)
        $(this).removeClass('fa-minus')
        $(this).addClass('fa-plus')
    }else{
        $(this).closest('.filter-container').find('.p-search-cat').show("slide",{direction:'up'},500)
        $(this).removeClass('fa-plus')
        $(this).addClass('fa-minus')
    }

})

// Filters - collapse up and down - END


//Search box Header - START

$('#search_books').on('click',function(){
    var redirect_url = bookSeach.buildSearchQuery()
    window.location.href = redirect_url['url'];
})

$("#query").keyup(function(event){
    if(event.keyCode == 13){
        $("#search_books").trigger('click');
    }
});

//Search box Header - END

//Applied FIlters - remove option

$('.p-filter-title img').on('click',function(){
    var param = $(this).attr('data-applied-filter')
    if(param=='author' || param=='publisher' || param=='seller' || param=='institute' || param=='binding' ){
        var id = $(this).attr('data-filter-id')
        $('#'+param+'_'+id).removeAttr('checked')
        $('#'+param+'_'+id).trigger('change')
    }else{
        var paramname = param.substr(0,param.lastIndexOf('_')+1)
        url = bookSeach.removeParameter(window.location.href,paramname+'name')
        redirect_url = bookSeach.removeParameter(url,param)
        window.location.href = redirect_url
    }

})



//Infinite Scroll - Book Results - START
if(location.href.indexOf('books/search/')>0){
    var count =10;
    $(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           bookSeach.loadBooksOnScroll(count);
           count+=10;
        }
    });

}

//Infinite Scroll - Book Results - END


//Filters in Responsive Layout - START

$('.apply').on('click',function(){
    $('.mobile-filters ul.p-search-var-items span.m_apply_filter').each(function(){
        if($(this).attr('data-is-selected')=='true'){
            var id = $(this).attr('data-id')
            var type = $(this).attr('data-type')
            var value = $('#m_'+type+'_id').val()!=''? $('#m_'+type+'_id').val()+','+id : id
            $('#m_'+type+'_id').val(value)
        }
    })

    $('.m_filter').each(function(){
        var param = $(this).attr('id');
        param = param.substr(param.indexOf('m_')+2)
        value = $.trim($(this).val())
        redirect_url = bookSeach.updateQueryStringParameter(url,param,value)
    })
    window.location.href = redirect_url
})

$('.m_apply_filter').on('click',function(){

    if($(this).attr('data-is-selected')=='false'){
        $(this).closest('li').addClass('p-search-var-items-active')
        $(this).attr('data-is-selected','true')
    }else{
        $(this).closest('li').removeClass('p-search-var-items-active')

        $(this).attr('data-is-selected','false')
    }

})

//Filters in Responsive Layout - END

$('.back-to-top').on('click', function(){
    $(window).scrollTop(0   )
})

$(window).on('scroll', function(){
    if($(window).scrollTop()>1200){

      $('.back-to-top').removeClass('hide')
    }else{
      $('.back-to-top').addClass('hide')

    }
})

$('.presentation a').on('click', function(e){
    e.preventDefault();
    var type= $(this).data('type')
    bookSeach.loadBooksOnSort(type)
    $('#dropdownMenu1 .sort_filter').text('Sort by :'+type)
    $('#dropdownMenu1').attr('data-filter-applied',type)
})

   }

})

})

它的作用是當你選擇一個過濾器時，它會更改url進行服務器調用並相應地顯示數據。

它還在向下滾動時實現無限滾動，它會再加載10個結果。

我想使用帶有打字稿的Angular2來實現整個事情。 有人可以建議我如何使用typescritp和Angular2實現我的js代碼。 我是角色的新手，所以我在實現同樣的問題時遇到了一些問題。

謝謝。

Answer 1

我太很新的角度2，但本教程中對我幫助很大： https://www.pluralsight.com/courses/angular-2-getting-started進一步實現無限滾動使用： HTTPS：//www.npmjs .com / package / angular2-infinite-scroll 。 希望這可以幫助 ：）

Answer 2

這更像是建議而不是答案。 你應該避免在Angular中使用jQuery。 原因是jQuery直接修改了DOM，Angular通過抽象修改了DOM。 你這樣做會遇到很多麻煩。

我不可能閱讀所有這些，這是一個很大的混亂，看起來你不是正確的方式，你的方法是大而肥胖和嘈雜。

如果您的目標是在滾動到一定長度后再查詢並顯示更多數據，那么您可以嘗試以下方法：

@HostListener('window:scroll', []) onWindowScroll($event: any) {
    // your logic...
}

然后在你的模板中使用*ngIf等...