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

Question

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

我的想法是在单击后加载内容（调用 ajax 并插入 html <ion-segment>。我的代码已经很大了。从基础开始，让我们使用此示例代码（带有 2 个<ion-segment>选项卡）：

代码后的更多信息

前线

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

前面.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服务/提供者。 您可以使用 CLI （ ionic generate provider ） 直接在 Ionic 中创建提供程序。 此外，在提供程序上，您可以公开可观察量/主题。 然后，您可以调用以在页面加载时获取数据，但不要等待它。 可观察对象/主题将在获取数据时填充自身。

示例服务/提供程序代码

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