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

Question

我有一页有 5 个<ion-segment> 标签。每个选项卡都有很多 HTML，每个选项卡调用 1 个 ajax 来获取内容。页面加载时间可能很长。

我的想法是在点击<ion-segment> 之后加载内容（调用 ajax 并插入 html）。我的代码已经很大了。从基础开始，让我们使用这个示例代码（带有 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>。我不知道该怎么做。

环境信息

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

感谢您的帮助。

Answer 1

您可能希望将 HTTP 调用移至 Angular service/provider。您可以使用 CLI (ionic generate provider) 在 Ionic 中直接创建提供程序。此外，在提供者上，您可以公开一个 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());
        }
    });

}