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文件，并在导入后将两个页面添加到declarations和entryComponents数组。

    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  
                       
    

 
                       
     
                           
    相关文章