How to use infinity scroll for child component, not in page component? Ionic 2


#1

Hello I have 1 page this content:

    <ion-content>
      {$page_urls=[
        'slideshow' => $router->getUrl('externalapi-front-apigate', ['method'=>'banner.getlist']),
        'category'  => $router->getUrl('externalapi-front-apigate', ['method'=>'category.getlist']),
        'topproducts'  => $router->getUrl('externalapi-front-apigate', ['method'=>'product.getlist'])
      ]}
      <blocks-banners-slideshow class="contentBlock" [config]="{ zone: 'mobile'}" [config_private]="{ url: '{$page_urls.slideshow}'}" [slideOptions]="{ loop: true, pager: true}"></blocks-banners-slideshow>
      <blocks-catalog-category class="contentBlock" [config]="{ parent_id: 0 }" [config_private]="{ url: '{$page_urls.category}'}"></blocks-catalog-category>
      <blocks-catalog-topproducts class="contentBlock" [config]="{ filter: { dir: 184}, page: 1, pageSize: 4}" [config_private]="{ url: '{$page_urls.topproducts}', infinityScroll: false, columns: { tablet: 4, phone: 2}}"></blocks-catalog-topproducts>
    </ion-content>

And component code of main page:

    import { Component, AfterViewInit } from '@angular/core';
    import { BannersSlideShow } from "../blocks/banners/slideshow";
    import { CatalogCategory } from "../blocks/catalog/category";
    import { CatalogTopProducts } from "../blocks/catalog/topproducts";
    import { HttpQueryService } from "../services/httpqueryservice";
    
    
    @Component({
      templateUrl : '/mobilesiteapp/template/?path=pages/main',
      directives: [
                    BannersSlideShow,
                    CatalogCategory,
                    CatalogTopProducts,
                  ],
    
      viewProviders: [
        HttpQueryService
      ]
    })
    
    export class MainPage implements AfterViewInit{
    

      constructor(
        private httpQueryService: HttpQueryService
      )
      {
    
      }
    

      ngAfterViewInit()
      {
          this.httpQueryService.sendQueriesPartially(); //Отправляем запрос для получения данных блоков
      }
    
    }

So I have third component with element’s that I need to scroll (blocks-catalog-topproducts).
The code is:

    <ion-list no-lines *ngIf="list">
      <ion-list-header>
        title
      </ion-list-header>
      <ion-item class="categoryProductItem" *ngFor="let row of list;">
          <ion-row wrap >
            <ion-col *ngFor="let product of row; trackBy:trackByObject" [attr.width-100]="(isColSize(100))" [attr.width-50]="(isColSize(50))" [attr.width-33]="(isColSize(33))" [attr.width-25]="(isColSize(25))">
              <a ion-item (click)="onSelectItem(product)"  class="categoryProductItemImage">
                <div class="categoryProductItemImage" *ngIf="product.getMainImage()">
                    <ion-img [src]="product.getMainImage()['small_url']"></ion-img>
                </div>
                <div class="title">
                  {{product.title}}
                </div>
              </a>
            </ion-col>
          </ion-row>
      </ion-item>
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
          <ion-infinite-scroll-content
              loadingSpinner="bubbles"
              loadingText="Please wait...">
          </ion-infinite-scroll-content>
      </ion-infinite-scroll>

And Component code is:

    import { Component, Input } from '@angular/core';
    import { NavController, NavParams, ToastController } from "ionic-angular";
    import { ProductPage } from "../../pages/productpage";
    import { CatalogProductItem } from "../../models/product";
    import { AbstractBlock } from "../abstractblock";
    import { HttpQueryService } from "../../services/httpqueryservice";
    import {BrowserDomAdapter} from "@angular/platform-browser/src/browser/browser_adapter";
    
    @Component({
      selector: 'blocks-catalog-topproducts',
      templateUrl: '/mobilesiteapp/template/?path=blocks/catalog/topproducts'
    })
    
    export class CatalogTopProducts extends AbstractBlock{
    
      list = []; 
    
      responseDataSection = 'list';
    
   
      @Input() config: any;
      @Input() config_private: any;
    

      constructor(
        private httpQueryService: HttpQueryService,
        public navCtrl: NavController, navParams: NavParams, 
        public toastCtrl: ToastController
      )
      {
        super(toastCtrl);
      }
    
 
      ngOnInit()
      {
        this.setColumns(this.config_private['columns']); //Установим количество колонок
        this.httpQueryService.addQueryToBuffer(this.config_private['url'], this.config, this);
      }
    
 
      doInfinite(infiniteScroll) {
        console.log('Begin async operation');
    
        setTimeout(() => {
          console.log('Async operation has ended');
          infiniteScroll.complete();
        }, 1500);
      }
    }

And I got a mistake because the infinite scroll not in тег. I can cut it, and insert into main page template. But how I can update the elements inside the child component, because doInfinity method must be in parent page component?


#2