Ionic3/Angular路由和导航教程和示例

分享于 

6分钟阅读

ionic

  繁體

在本教程中,在Ionic 3/Angular中学习路由和导航。

Ionic 3使用导航堆栈实现页面之间的导航。

只有理解这两个堆栈概念,才能理解Ionic3导航系统:

  • 导航到页面时,将页面推到堆栈顶部。

  • 从页面导航时,将从堆栈顶部弹出页面。

  • 你可以从这个维基百科链接了解更多关于堆栈数据结构的信息

    从Ionic 3导航开始

    NavController组件公开了许多方法,因此你可以轻松控制导航堆栈,但NavController不是导航的唯一可用组件,还有其他组件:

  • NavParams
  • NavPop
  • NavPush
  • Nav
  • NavBar等等
  • 我们首先生成一个新的Ionic 3项目(基于空白模板),在终端或命令提示符中执行以下命令:

    
    $ ionic start ionic-2-navigation blank
    
    

    blank模板只有一个页面,HomePage,所以,先添加一些其他页面,然后浏览到project文件夹中,使用

    
    $ cd ionic-2-navigation 
    $ ionic g page about 
    $ ionic g page contact 
    
    

    你需要将这两个页面添加到app.module.ts,为此,只需打开src/app/app.module.ts文件,并在导入后将两个页面添加到declarationsentryComponents数组。

    import { NgModule, ErrorHandler 
    }
    from '@angular/core';
     import { IonicApp, IonicModule, IonicErrorHandler 
    }
    from 'ionic-angular';
     import { MyApp 
    }
    from './app.component';
     import { HomePage 
    }
    from '../pages/home/home';
     import { AboutPage 
    }
    from '../pages/about/about';
     import { ContactPage 
    }
    from '../pages/contact/contact';
     @NgModule({
     declarations: [
     MyApp,
     HomePage,
     AboutPage,
     ContactPage
     ],
     imports: [
     IonicModule.forRoot(MyApp)
     ],
     bootstrap: [IonicApp],
     entryComponents: [
     MyApp,
     HomePage,
     AboutPage,
     ContactPage
     ],
     providers: [{provide: ErrorHandler, useClass: IonicErrorHandler
    }
    ]
     
    }
    )
     export class AppModule {
    }

    使用NavController

    现在我们准备添加一个简单的导航,添加代码,通过单击一些按钮,从主页导航到about或contact页面。

    打开app/src/pages/home/home.ts文件,并执行以下步骤:

  • 导入两页组件
  • 添加两个方法,gotoAbout()gotoContact()
  • 导入两个页面组件:

    import { AboutPage 
    }
    from '../about/about';import { ContactPage 
    }
    from '../contact/contact';

    添加导航方法:

    
     @Component({
     selector: 'page-home',
     templateUrl: 'home.html'
     
    }
    )
     export class HomePage {
     constructor(public navCtrl: NavController) {
     
    }
    public gotoAbout(){
     this.navCtrl.push(AboutPage);
     
    }
    public gotoContact(){
     this.navCtrl.push(ContactPage);
     
    }
    }

    正如你可以看到的,使用push()方法NavController导航到另一个页面,该方法通过page构造函数注入,并且可以从this.navCtrl对象获得。

    要导航到另一个页面,首先导入,然后使用NavController push方法,该方法将目标页面-组件作为参数。

    打开src/pages/home/home.html文件,并添加两个按钮

    
     <button ion-button (click)="gotoAbout();">Go to about</button>
    
     <button ion-button (click)="gotoContact()">Go to contact</button>
    
    

    向about和contact页面添加back按钮,打开src/pages/about/about.ts文件,并添加一个goBack()方法:

    
     goBack(){
     this.navCtrl.pop();
     
    }

    然后将它绑定到相应组件视图中的按钮:

    
     <button ion-button (click)="goBack()">Go back</button>
    
    

    对联系人页面执行相同的操作。


    教程  ION  Ionic  
    相关文章