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（{{1}）在Ionic中直接创建提供程序。此外，在提供程序上，您可以公开一个Observable / Subject。然后，您可以进行调用以获取页面加载时的数据，而无需等待。 Observable / Subject会在获取数据时自行填充。

示例服务/提供商代码

ionic generate provider

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

1 个答案: