首页 文章

如何导航到Ionic 2应用程序

提问于
浏览
1

我正试图在Ionic 2中做一个小应用程序,但我无法导航...我已经阅读了文档,导航内容,navController,StackOverflow上的一些帖子......我试了好几个小时但是我被卡住了!我有几个问题 .

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

所以...我在这里,坚持导航!我不知道该怎么办 . 这是我的代码 .


Update 好的,undefined现在还可以 . 但我的导航仍然很奇怪 . 当我在主页上使用 this.nav.push() 时,我得到了这个工作流程:单击Messagerie:Open Messagerie并立即返回主页 . 点击Demandes:Open 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);
    }
}

我错过了什么吗?我究竟做错了什么 ?非常感谢你的帮助 !

2 回答

  • 0

    你能试一试吗:

    在app.ts中,声明nav和follow数组如下:

    @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}
        ];
    

    在html中替换你的按钮“Ma messagerie”和“Mes demandes”,如下所示:

    <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 . 一般来说,除非你真的需要设置根,我认为,你应该推动堆栈中的页面导航而不是再次设置root . 所以基本上使用navcontroller上的push和pop进行导航 .

    ***更新以转到下一页并从历史记录中删除当前页面

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

    ****更新

    然后在主页上添加显示菜单切换

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

    我试图从我的工作代码中提取这些行,希望它会帮助你 .

  • 3

    您需要将范围变量设置为实际页面 . 现在,(click)=“openPage(Messagerie)” - >传入的Messagerie是未定义的 . 您需要在组件中设置this.Messagerie = Messagerie .

相关问题