如何导航到 Ionic 2 应用程序

Question

我想在 Ionic 2 中做一个小应用程序，但我无法导航... 我已经阅读了文档、导航内容、navController、Whosebug 上的一些 post...我尝试了几个小时，但我被卡住了！我有几个问题。

我必须找到一种将 navController 用于我的 app.js 的方法，感谢 @viewChild 和 StackOF。原理我不是很明白。我设置rootPage: any = Login;。由于我的应用程序上有一个菜单，因此我在此页面上禁用了它。在按钮 (click) 上，我将根 this.nav.setRoot() 设置为 HomePage。现在，在主页的菜单中，我想浏览一些页面。我被困在这里了。我使用了 (click)="openPage(Messagerie)" 方法。第一个问题，openPage() 中的参数未定义。然后我按照文档尝试了 [navPush]="pageMessagerie" 和 this.pageMessagerie = Messagerie; 方法，但效果不佳，没有任何反应。因此，我尝试将页面硬编码到我的 openPage() 函数中：this.nav.push(Messagerie);。在这里，我又遇到了另一个问题。我第一次调用 push() 时，页面似乎立即出现并消失，回到主页。我第二次点击，它似乎起作用了。我可以进入 Messagerie 页面，然后通过导航栏上的后退按钮返回主页。

所以...我在这里，坚持使用导航！我不知道该怎么办。这是我的代码。

更新好的，undefined 现在可以了。但我的导航仍然表现得很奇怪。当我在主页上使用 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);
    }
}

我错过了什么吗？我究竟做错了什么？非常感谢您的帮助！

Answer 1

您需要将范围变量设置为实际页面。现在 (click)="openPage(Messagerie)" --> 正在传递的 Messagerie 未定义。您需要在组件中设置 this.Messagerie = Messagerie。

Answer 2

你能试试这个吗:

在app.ts中声明导航和跟随数组如下：

@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 添加

中显示菜单切换

<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>

我试图从我的工作代码中提取这些行，希望它能帮助你。

如何导航到 Ionic 2 应用程序

How to navigate into an Ionic 2 app

angular

ionic-framework

nav

ionic2

viewchild