1

Ionic 2 で小さなアプリを作成しようとしていますが、ナビゲートできません...ドキュメント、ナビゲーション関連、navController、StackOverflow に関するいくつかの投稿を読みました...何時間も試しましたが、行き詰まりました! いくつかの問題がありました。

app.js で使用する方法を見つける必要がnavControllerありましたが、これは StackOF のおかげで@viewChild実現できました。原理がよくわかりません。設定しrootPage: any = Login;ました。アプリにメニューがあるので、このページで無効にしました。ボタン(click)で、ルートthis.nav.setRoot()を で設定しHomePageます。メニュー内の HomePage から、いくつかのページをナビゲートしたいと思います。私はここで立ち往生しています。(click)="openPage(Messagerie)"メソッドを使用しました。最初の問題は、openPage() のパラメーターが未定義です。[navPush]="pageMessagerie"次に、ドキュメントに従ってandメソッドを試しましたthis.pageMessagerie = Messagerie;が、うまく機能せず、何も起こりませんでした。そのため、ページを openPage() 関数にハードコーディングしようとしました:this.nav.push(Messagerie);. ここで、また別の問題があります。初めて push() を呼び出すと、ページが表示されてすぐに消え、HomePage に戻ってきます。2回目にクリックすると、うまくいくようです。Messagerie ページに移動し、ナビゲーション バーの [戻る] ボタンを使用して HomePage に戻ることができます。

だから...ここで私は、ナビゲーションで立ち往生しています！どうすればいいのかわからない。これが私のコードです。

更新 OK 未定義は OK になりました。しかし、私のナビはまだ奇妙な動作をします。ホームページで使用するthis.nav.push()と、次のワークフローが得られました。Messagerie をクリックします。Messagerie を開き、すぐにホームページに戻ります。Demandes をクリックします: Messagerie を開き、すぐに Demandes を開き、そこにとどまります。ナビゲーション バーの戻るボタンをクリックします。Messagerie に戻り、Demandes に戻り、ホームページに戻ります。もちろん、this.nav.setRoot()毎回使用すると機能しますが、ナビゲーションの原則が失われます。

App.html

<ion-menu [content]="content">
    <ion-toolbar>
        <ion-title>Menu</ion-title>
    </ion-toolbar>
    <ion-content>
        <ion-list>
            <button ion-item menuToggle = "left">
                Mes informations
            </button>
            <button ion-item menuToggle = "left" (click)="openPage(Messagerie)">
                Ma messagerie
            </button>
            <button ion-item menuToggle = "left" (click)="openPage(Demandes)">
                Mes demandes
            </button>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>

App.ts

import {Component, ViewChild}  from '@angular/core';
import {Platform, ionicBootstrap, NavController} from 'ionic-angular';
import {StatusBar}  from 'ionic-native';
import {HomePage}   from './pages/home/home';
import {Messagerie} from './pages/messagerie/messagerie';
import {Demandes}   from './pages/demandes/demandes';
import {Login}      from './pages/login/login';

@Component({
    templateUrl: 'build/app.html' 
})

export class MyApp {

    @ViewChild('content') nav

    rootPage: any = Login;

    constructor(private platform: Platform) {
        platform.ready().then(() => {
            StatusBar.styleDefault();
        });
    }

    openPage(page) {
        console.log(page);
        this.nav.push(page);
    }
}

ionicBootstrap(MyApp);

Login.ts (setroot を使用)

import {Component}      from '@angular/core';
import {NavController, MenuController}  from 'ionic-angular';
import {FormBuilder, ControlGroup, Validators} from '@angular/common';
import {HomePage}       from '../home/home';

@Component({
    selector: 'mc-login',
    templateUrl: 'build/pages/login/login.html'
})
export class Login {

    loginForm: ControlGroup;

    loginChanged:       boolean = false;
    motdepasseChanged:  boolean = false;
    submitAttempt:      boolean = false;

    constructor(private nav: NavController, private formBuilder: FormBuilder, private menu: MenuController) {
        this.menu.enable(false);
        this.loginForm = formBuilder.group({
            login: ['', Validators.compose([Validators.maxLength(10), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
            motdepasse: ['', Validators.compose([Validators.maxLength(10), Validators.pattern('[a-zA-Z ]*'), Validators.required])]
        });
    }

    elementChanged(input) {
        let field = input.inputControl.name;
        this[field+"Changed"] = true;
    }

    logintoapp() {
        this.submitAttempt = true;

        if(this.loginForm.valid) {
            this.logindatabase();
        } else {
            console.log("Nope");
        }    
    }

    logindatabase() {
        this.nav.setRoot(HomePage);
    }
}

私は何かが恋しいですか？私は何を間違っていますか？助けてくれてありがとう！

4

2 に答える 2

3

これを試していただけますか：

app.ts で、nav と次の配列を次のように宣言します。

@ViewChild(Nav) nav:Nav;

browsePages:Array<{title:string, component:any}>;

コンストラクターに追加します (これは後で明示的にメニューを閉じる必要があるだけです):

private menu: MenuController

コンストラクター内で、メニューに追加するページを宣言します。

this.browsePages = [
        {title: 'Ma messagerie', component: Messagerie},
        {title: 'Mes demandes', component: Demandes}
    ];

次のように、ボタン「Ma messagerie」と「Mes demandes」を html に置き換えます。

<button ion-item *ngFor="let p of browsePages" (click)="openPage(p)">
   {{p.title}}
</button>

そして最後に openPage メソッド:

openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component);
}

それはメニューからのナビゲーション用でした。

ログインページからのナビゲーションについて... setroot をナビゲーションプッシュに置き換えます。一般的に言えば、本当にルートを設定する必要がある場合を除いて、ルートを再度設定するのではなく、ページをスタックにプッシュしてナビゲートする必要があると思います。したがって、基本的にナビコントローラーのプッシュとポップを使用してナビゲートします。

*** 次のページに移動し、現在のページを履歴から削除するための更新

logindatabase() {
    this.goToNextPageWithoutBack(HomePage);
}

private goToNextPageWithoutBack(page:any, params?:any) {
    this.nav.push(page, params).then(() => {
        this.removeCurrentViewFromHistory();
    });
}

private removeCurrentViewFromHistory() {
    const index = this.nav.getActive().index;
    this.nav.remove(0, index);
}

**** アップデート

そして、homepage.html add にメニュートグルを表示します

<ion-header>
<ion-navbar>

<button menuToggle start>
  <ion-icon name="ios-menu-outline"></ion-icon>
</button>

<ion-title>my-items</ion-title>
</ion-navbar>
</ion-header>

作業コードからこれらの行を抽出しようとしましたが、お役に立てば幸いです。

于 2016-08-05T18:50:03.097 に答える
0

スコープ変数を実際のページに設定する必要があります。現在、 (click)="openPage(Messagerie)" --> 渡される Messagerie は未定義です。コンポーネントで this.Messagerie = Messagerie を設定する必要があります。

于 2016-08-05T18:48:12.200 に答える