Question

你好我有1页这个内容：

<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>

主页的组件代码：

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(); //Отправляем запрос для получения данных блоков
  }

}

所以我有第三个元素，我需要滚动（blocks-catalog-topproducts）。代码是：

<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>

组件代码是：

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);
  }
}

我犯了一个错误，因为无限滚动不在тег。我可以剪切它，并插入主页面模板。但是我如何更新子组件内的元素，因为doInfinity方法必须在父页面组件中？

如何在子组件中使用无限滚动，而不是在页面组件中？ Ionic 2，Angular 2

0 个答案: