Ionic 2: <ion-сегмент> загружает весь контент из всех сегментов при загрузке страницы. Как загрузить после клика сегмента? - PullRequest
Новая
       8

Ionic 2: <ion-сегмент> загружает весь контент из всех сегментов при загрузке страницы. Как загрузить после клика сегмента?

0 голосов
/ 11 января 2019

У меня есть одна страница с 5 <ion-segment> вкладками. Каждая вкладка имеет много HTML, и каждая вкладка вызывает 1 ajax для получения контента. Время загрузки страницы может быть долгим.

Моя идея - загрузить контент (вызвать ajax и вставить html) после нажатия <ion-segment>. Мой код уже большой. Основы, давайте использовать этот пример кода (с 2 <ion-segment> вкладками):

Больше информации после кода

front.ts 

import { Http, Headers } from '@angular/http';
import { Component } from '@angular/core';
import { App, NavController, NavParams } from 'ionic-angular';

@Component({
    selector: 'page-front',
    templateUrl: 'front.html'
})
export class FrontPage {
    group_tabs    : string = "feed";
    group_pyramid : any;

    group_data    = [];
    feed_items    = [];

    constructor(public http: Http, public nav: NavController, public navParams: NavParams, private app: App) {

    }

    getGroupData(){
        var headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');

        var r = new Promise(resolve => {
            var get_group_data_url = 'MY_URL_TO_GET_THE_GROUP_DATA';

            this.http.post(get_group_data_url, {headers: headers}).subscribe(data => {
                if(data.json().success){
                    this.group_data = data.json().group_data;
                    resolve(true);
                }
            });
        });

        return r;
    }

    getGroupFeed(page=1){
        var headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        var r = new Promise(resolve => {

            var get_feed_url = 'MY_URL_TO_GET_GROUP_FEED';
            this.http.post(get_feed_url, {headers: headers}).subscribe(data => {
                if(data.json().success){
                    var feed_items = this.feed_items;
                    feed_items = feed_items.concat(data.json().notifications);
                    this.feed_items = feed_items;
                    resolve(true);
                }
            });

        });

        return r;
    }

    getGroupPyramid(){
        var headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');

        var r = new Promise(resolve => {
            var getGroupPyramid_url = 'MY_URL_TO_GET_PYRAMID';

            this.http.post(getGroupPyramid_url, {headers: headers}).subscribe(data => {
                if(data.json().success){
                    this.group_pyramid = data.json().group_pyramid;
                    resolve(true);
                }
            });
        });

        return r;
    }

    ionViewDidLoad() {
        // General information
        this.getGroupData();

        // Feed - FIRT TAB - ON PAGE LOAD
        var page = (this.feed_items.length / 10) + 1;
        this.getGroupFeed(page);

        // SECOND TAB WAS LOAD WITHOUT ANY CONTENT
    }

    doInfinite(infiniteScroll) {
        setTimeout(() => {
            var page = (this.feed_items.length / 10) + 1;
            this.getGroupFeed(page);
            infiniteScroll.complete();
        }, 500);
    }
}

front.html 

<ion-header>
    <ion-navbar color="dark">
        <ion-title>{{ group_data.group_name }}</ion-title>
    </ion-navbar>

    <ion-segment [(ngModel)]="group_tabs" color="dark">
        <ion-segment-button value="feed">
            <ion-icon name="list-box"></ion-icon>
        </ion-segment-button>

        <ion-segment-button value="pyramid">
            <ion-icon name="trophy"></ion-icon>
        </ion-segment-button>
    </ion-segment>
</ion-header>

<ion-content class="page-front">    
    <div [ngSwitch]="group_tabs">
        <div *ngSwitchCase="'feed'">
            <h1 padding>Feed</h1>

            <ion-card *ngFor="let feed_item of feed_items" margin-bottom>
                <div class="ion-card-group-feed subtype-{{feed_item.subtype}}">
                    <ion-item>
                        <p class="meta-date">{{feed_item.created_at}}</p>
                    </ion-item>

                    <ion-card-content>
                        <p><strong>{{feed_item.profile.name}}</strong> {{ 'JOINED THE GROUP' | translate }} {{feed_item.group_name}}.</p>
                    </ion-card-content>
                </div>
            </ion-card>

            <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
                <ion-infinite-scroll-content></ion-infinite-scroll-content>
            </ion-infinite-scroll>
        </div>

        <div *ngSwitchCase="'pyramid'">
            <h1 padding>Ranking</h1>

            <div class="second-tab-content">
                SECOND_TAB_CONTENT_LOAD_HERE_AFTER_CLICK
            </div>
        </div>
    </div>
</ion-content>

В этом примере у меня есть 1 HTML, который загружает 2 <ion-segment> вкладки. Первая вкладка загрузить HTML. Вторая вкладка не имеет содержимого.

Я хочу нажать на второй вкладке и вызвать функцию getGroupPyramid(). Эта функция вернет JSON. JSON будет использоваться на второй вкладке для отображения HTML. HTML-код на второй вкладке будет <ion-list>. Я понятия не имею, как это сделать.

Env info 

Cordova CLI: 6.4.0 
Ionic Framework Version: 3.9.2
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 3.1.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.11.2
Xcode version: Not installed

ionic -v: 2.2.1

Я ценю любую помощь.

1 Ответ

0 голосов
/ 11 января 2019

Вы, вероятно, захотите перевести свои HTTP-вызовы на Angular сервис / провайдер . Вы можете сделать провайдера напрямую в Ionic, используя CLI (ionic generate provider). Кроме того, на провайдера вы можете выставить Observable / Subject. Затем вы можете позвонить, чтобы получить данные о загрузке страницы, но не ждать ее. Observable / Subject заполняется сам, когда получает данные.

Пример кода службы / поставщика 

//Private Subject (so pages can't update it)
private _serviceGroupData: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
//Public observable, that would be used in your page as needed
public readonly serviceGroupData$: Observable<any[]> = this._serviceGroupData.asObservable();

getGroupData(){
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    var get_group_data_url = 'MY_URL_TO_GET_THE_GROUP_DATA';

    this.http.post(get_group_data_url, {headers: headers}).subscribe(data => {
        if(data.json().success){
            //Trigger the observable update here
            this._serviceGroupData.next(data.json());
        }
    });

}
...