离子2： <ion-segment> 在页面加载时加载所有细分中的所有内容。 段点击后如何加载？

Question

I have one page with 5 <ion-segment> tabs. Each tab has a lot of HTML and each tab call 1 ajax to get content. Page load time may be long.

My idea is to load the content (call ajax and insert html) after <ion-segment> click. My code is already big. From the basics, let's use this example code (with 2 <ion-segment> tabs):

More info after code

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>

In this example, I have 1 html, which loads 2 <ion-segment> tabs. First tab load the HTML. Second tab has no content.

I want to click in the second tab, and call the function getGroupPyramid() . This function will return a json. The json will be used in the second tab to show the HTML. The HTML in second tab will be an <ion-list> . I have no idea how to do this.

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

I appreciate any help.

Answer 1

You likely will want to move your HTTP calls to an Angular service/provider . You can make a provider directly in Ionic using the CLI ( ionic generate provider ). Additionally, on the provider, you could expose an Observable/Subject. Then you can make the call to get data on page load but not wait for it. The Observable/Subject will populate itself when it gets data.

Sample Service/Provider Code

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

}