Ionic 2：使用 URL 导航答案

【问题标题】：Ionic 2: navigate using URLsIonic 2：使用 URL 导航
【发布时间】：2017-02-17 09:20:06
【问题描述】：

我是 Ionic 2 框架的新手。我想知道，如何使用 url 在 ionic 应用程序中导航。 Angular 2 应用程序中的导航方式与此类似。

假设我想在 localhost:8100/intro 上拥有 IntroPage 并带有登录按钮，按下按钮后我想重定向到 HomePage 在 localhost:8100/home 上。

localhost:8100/intro -> localhost:8100/home

【问题讨论】：

标签： angular ionic2

【解决方案1】：

你可以使用ionic2的DeepLinker。

在 ionic2 中，您只需使用 this.navigator.push(SomeComponent) 即可导航。但是，如果您想更改 url，则需要为它们定义深层链接器，例如：

imports: [
 IonicModule.forRoot(MyApp, {}, {
  links: [
   { component: HomePage, name: 'Home', segment: 'home' }
  ]
 })
]

【讨论】：

【解决方案2】：

如文档所述：(https://ionicframework.com/docs/v2/api/navigation/NavController/) 您仍然不能像在 ionic 1 中那样使用 ui-sref ..但只有 this.navigation.push('home')... 这意味着您必须在 html 上执行一个功能（可能是 (click)="myfunc() " ) 调用 ts 文件中的导航

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
   template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
   @ViewChild('myNav') nav: NavController
   public rootPage = TabsPage;

   // Wait for the components in MyApp's template to be initialized
   // In this case, we are waiting for the Nav with reference variable of "#myNav"
   ngOnInit() {
      // Let's navigate from TabsPage to Page1
      this.nav.push('home');
   }
}

【讨论】：