ionic2中 NavController导航组件用法方法关于页面的导航

来自自己的理解和官网翻译

1.NavController概述

        NavController是导航控制器组件的基类，如Nav和Tab。 您可以使用导航控制器导航到应用程序中的页面。 在基本级别，导航控制器是表示特定历史（例如，Tab）的页面的数组。 可以通过按压和弹出页面或在历史记录中的任意位置插入和删除这些数组来操纵整个应用程序。

     当前页面是数组中的最后一个页面，或者堆栈的顶部，如果我们想到这样的话。 将新页面推入导航堆栈的顶部会导致新页面动画化，而弹出当前页面则将导航到堆栈中的上一页。
    除非您使用像NavPush这样的指令，或者需要特定的NavController，否则大多数情况下，您将注入并使用最接近的NavController的引用来操作导航堆栈。

2.基本用法：

浏览应用程序的最简单方法是使用<ion-nav>组件创建和初始化新的导航控制器。 ion-nav扩展了NavController类。

import { Component } from `@angular/core`;
import { StartPage } from './start-page';

@Component(
    template: `<ion-nav [root]="rootPage"></ion-nav>`
})
class MyApp {
  // set the rootPage to the first page we want displayed
  public rootPage: any = StartPage;

  constructor(){
  }
}

3.注入NavController

注入NavController将始终为您提供最近的NavController的实例，无论它是Tab还是导航。


在幕后，当Ionic实例化一个新的NavController时，它创建一个注射器，NavController绑定到该实例（通常是Nav或Tab），并将注入器添加到其自己的提供者。 


相反，您可以注入NavController，并知道它是大多数情况下正确的导航控制器

import { NavController } from 'ionic-angular';

class MyComponent {
  constructor(public navCtrl: NavController) {

  }
}

4.从根组件导航

如果你想控制从你的根应用程序组件导航怎么办？ 您不能注入NavController，因为导航控制器的任何组件都是根组件的子项，因此无法注入。


通过向ion-nav添加引用变量，您可以使用@ViewChild获取Nav组件的一个实例，它是一个导航控制器（它扩展NavController）：注意123点代码中注释的

import {Component,ViewChild }from'@angular/core';//1.引入ViewChild

import { NavController } from 'ionic-angular';

@Component({

template:'<ion-nav #myNav [root]="rootPage"></ion-nav>'//2.用ion-nav声明模板

})

export class MyApp {

@ViewChild('myNav')nav:NavController //3.声明用子页面模式加载

public rootPage: any = 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"

//等待MyApp模板中的组件进行初始化
    //在这种情况下，我们正在等待导航与引用变量“#myNav”

ngOnInit() {

// Let's navigate from TabsPage to Page1

this.nav.push(Page1);

}

}

5.从覆盖组件导航
     如果您想从覆盖组件（popover，模态，警报等）导航，该怎么办？ 在这个例子中，我们在我们的应用中展示了一个popover。 从popover中，我们将使用getRootNav（）方法获取应用程序中的根NavController的引用。这种方法在当前页面刷新后在点击按钮返回就会报错说至少存在一个跟组件。原因是刷新后当前页面加载后并没有上一级页面，所以在返回跟组件的时候就出现了找不到上一级页面的问题。

import { Component } from '@angular/core';

import {App,ViewController }from'ionic-angular';//1.注入

@Component({

template: `

<ion-content>

<h1>My PopoverPage</h1>

<button ion-button (click)="pushPage()">Call pushPage</button>//2.点击触发函数

</ion-content>

`

})

class PopoverPage {

constructor(

publicviewCtrl:ViewController//3.依赖注入实例

public appCtrl: App

) {}

pushPage() {

this.viewCtrl.dismiss();//4.导航到根组件。这里的根组件可以是你想跳转的任意上一级页面

this.appCtrl.getRootNav().push(SecondPage);

}

}

6.视图创建

      视图在添加到导航堆栈中时创建。 对于像push（）这样的方法，NavController接受使用@Component装饰的任何组件类作为其第一个参数。 然后，NavController编译该组件，将其添加到应用程序并将其动画化为视图。

   默认情况下，页面被缓存并保留在DOM中，如果它们远离但仍在导航堆栈（例如push（）中的退出页面）。 当从导航堆栈（在pop（）或setRoot（））上删除时，它们被销毁。

7.push一个视图

     要将新视图推入导航堆栈，请使用push方法。 如果页面有<ion-navbar>，则后退按钮将自动添加到推送视图。也可以通过将对象传递给push方法来将数据传递给视图。 然后，推送视图可以通过NavParams类访问数据。

传递参数页面：

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { IonicPage } from 'ionic-angular';

@IonicPage()

@Component({

selector: 'message-about',

templateUrl:'message.html'

})

export class MessagePage {

public id:any;

publicname:any;//定义参数类型

constructor(publicnavCtrl:NavController) {

}

motai(){

this.navCtrl.push("PopoverPage",{//push的时候带参数id和name放在一个对象里面

id:123,

name:"傻小胖"

});

}

}

接收参数页面：

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams,App, ViewController} from 'ionic-angular';

@IonicPage()

@Component({

selector: 'page-popover',

templateUrl:'popover.html',

})

export class PopoverPage {

id:any=this.navParams.get("id");//定义一个参数接受上一个页面传递过来的参数，用navParams.get方法来获取上一个页面传递过来的参数

name:any=this.navParams.get("name");

constructor(

public navCtrl: NavController,

public navParams: NavParams,

public appCtrl: App,

public viewCtrl: ViewController) {

}

}

html:

<ion-content>

<h1>My PopoverPage</h1>

<p>{{id}}</p>//显示传递过来的参数

<p>{{name}}</p>

</ion-content>

效果：

8.移除一个视图：

要从堆栈中删除视图，请使用pop方法。 弹出视图将转换到上一个视图。

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({

template: `

<ion-header>

<ion-navbar>

<ion-title>Other Page</ion-title>

</ion-navbar>

</ion-header>

<ion-content>I'm the other page!</ion-content>`

})

class OtherPage {

constructor(public navCtrl: NavController ){

}

popView(){

this.navCtrl.pop(); //在一个方法里面移出当前组件视图

}

}

html:

<buttonion-button (click)="popView()">Call popPage</button>//添加一个点击事件调用移除视图

效果：事件触发当前视图被移除，页面回到上一个页面视图

9.生命周期事件

生命周期事件在不同的导航阶段触发。 可以从任何从NavController中push/pop的组件类型中定义它们。

import { Component }from'@angular/core';

@Component({

template: 'Hello World'

})

class PopoverPage {

ionViewDidLoad() {

console.log("I'm alive!");

}

ionViewWillLeave() {

console.log("Looks like I'm about to leave :(");

}

}

效果：

nav属性

Page Event	Returns	Description
ionViewDidLoad	void	页面加载时运行。 此事件仅在每个页面创建时发生一次。 如果页面离开但被缓存，则此事件将不会在后续查看时再次启动。 ionViewDidLoad事件是放置页面的设置代码的好地方。
ionViewWillEnter	void	当页面即将进入并成为激活页面时运行。
ionViewDidEnter	void	当页面已完全输入并且现在是激活页面时运行。 此事件将触发，无论是第一次加载还是缓存页面。
ionViewWillLeave	void	当页面即将离开并且不再是激活页面时运行。
ionViewDidLeave	void	当页面完成离开时运行，并且不再是激活页面。
ionViewWillUnload	void	当页面即将被销毁并删除其元素时运行。
ionViewCanEnter ionViewCanLeave	boolean/Promise<void> boolean/Promise<void>	在视图可以进入之前运行。 这可以在认证视图中用作“保护”，您需要在视图输入之前检查权限 视图可以离开时运行。 这可以在认证视图中用作“守卫”，您需要在视图离开之前检查权限

10.Nav守卫

在某些情况下，开发人员应该能够控制离开和进入的视图。 为了允许这一点，NavController具有ionViewCanEnter和ionViewCanLeave方法。 与Angular路线守卫类似，但与NavController更加集成。 例如，如果您想阻止用户离开视图：

export classMyClass{

constructor(

public navCtrl:NavController

){}

pushPage(){

this.navCtrl.push(DetailPage);

}

ionViewCanLeave(): boolean{

// here we can either return true or false

// depending on if we want to leave this view

if(isValid(randomValue)){

return true;

} else {

return false;

}

}

}

我们需要确保我们的navCtrl.push有一个catch来捕捉并处理错误。 如果你需要防止视图进入，你可以做同样的事情

export classMyClass{

constructor(

public navCtrl:NavController

){}

pushPage(){

this.navCtrl.push(DetailPage);

}

}

export classDetailPage(){

constructor(

public navCtrl:NavController

){}

ionViewCanEnter(): boolean{

// here we can either return true or false

// depending on if we want to leave this view

if(isValid(randomValue)){

return true;

} else {

return false;

}

}

}

类似于ionViewCanLeave，我们仍然需要在原来的navCtrl.push上捕获，以便正确处理它。 当ion-navbar导航栏时后腿按钮有效

11NavOptions

NavController上的一些方法允许自定义当前的转换。 为此，我们可以传递具有修改的属性的对象。

Property	Value	Description
animate	boolean	Whether or not the transition should animate.
animation	string	What kind of animation should be used.
direction	string	The conceptual direction the user is navigating. For example, is the user navigating forward, or back?
duration	number	The length in milliseconds the animation should take.
easing	string	The easing for the animation.

12.实例成员

canGoBack()

如果有一个有效的上一页我们可以弹回来，返回true。 否则返回false。

canSwipeBack()

如果可以使用滑动回来。 如果不可能返回，或者滑回不启用，那么这将返回false。 如果可以返回，并且启用滑动，那么这将返回true。

first()

返回此导航控制器堆栈中的第一个视图控制器。

getActive()

返回激活页面的视图控制器。

getActiveChildNav()

返回活动的子导航。

getActiveChildNavs()

返回活动子导航列表。

getByIndex(index)

Param	Type	Details
index	number	要获取的页面的索引。

Returns: ViewController

返回与给定索引匹配的视图控制器。

getPrevious(view)

返回给定视图控制器之前的视图控制器。 如果没有传入视图控制器，那么它将默认为活动视图。

Param	Type	Details
view	ViewController

Returns: viewController

getSecondaryIdentifier()

获得辅助标识符

getType()

获得类型

getViews()

获得视图

返回此导航控制器中当前的视图堆叠。

Returns: Array<ViewController>该导航控制器中的视图控制器堆栈。

goToRoot()

去跟组件

indexOf(view)

遍历视图

返回给定视图控制器的索引号。

Returns: number

 insert(insertIndex, page, params, opts)

在指定的索引中将一个组件插入到导航堆栈中。 如果您需要在导航堆栈中的任何位置添加组件，这将非常有用。


属性	类型	详情
insertIndex	number	The index where to insert the page.索引 在哪里插入页面。
page	Page|string	The component class or deeplink name you want to push onto the navigation stack. 要推送到导航堆栈的组件类或深层名称。
params	object	Any NavParams you want to pass along to the next view 您想传递给下一个视图的任何NavParams .OPTIONAL
opts	object	Nav options to go with this transition 导航选项可以随着这个过渡。 .OPTIONAL

Returns:  Promise

返回转换完成后解决的承诺。




insertPages(insertIndex, insertPages, opts)

在指定的索引中将导入堆栈中的一个组件数组插入。 数组中的最后一个组件将被实例化为一个视图，并且动画化成为主动视图。


属性	类型	详情
insertIndex	number	The index where you want to insert the page. 要插入页面的索引。
insertPages	array	An array of objects, each with a page and optionally params property. 一组对象，每个都有一个页面和可选的params属性。
opts	object	Nav options to go with this transition 导航选项可以随着这个过渡。 .OPTIONAL

Returns:  Promise

返回转换完成后解决的承诺。

isActive(view)

如果给定视图是活动视图，则返回。

isTransitioning()

如果导航控制器正在激活转换，则返回。

last()

返回此导航控制器堆栈中的最后一页。

length()

返回此导航控制器中的视图数。

此堆栈中的视图数，包括当前视图。

parent

父导航实例。 如果这是根导航，那么它将为空。 Tab实例的父级是Tabs，否则父级将是另一个导航，如果它还不是根导航。

pop(opts)

调用从当前组件导航回来。 与push（）类似，您也可以传递导航选项。

popToRoot(opts)

导航到堆栈的根，不管多远。

push(page, params, opts)

将新的组件推送到当前的导航堆栈中。 将任何其他信息作为对象传递。 此附加信息可通过NavParams访问

Param	Type	Details
page	Page|string	The component class or deeplink name you want to push onto the navigation stack. 要推送到导航堆栈的组件类或深层名称。
params	object	Any NavParams you want to pass along to the next view 您想传递给下一个视图的任何NavParams。 .OPTIONAL
opts	object	Nav options to go with this transition 导航选项可以随着这个过渡。 .OPTIONAL

remove(startIndex, removeCount, opts)

从指定索引的导航堆栈中删除一个页面。

Param	Type	Details
startIndex	number	The starting index to remove pages from the stack. Default is the index of the last page. 从堆栈中删除页面的起始索引。 默认是最后一页的索引。
removeCount	number	The number of pages to remove, defaults to remove  要删除的页面数，默认为删除1.OPTIONAL
opts	object	Any options you want to use pass to transtion 您想要使用的任何选项都转移到转换 .OPTIONAL

Returns:  Promise

 removeView(viewController, opts)

从导航堆栈中删除指定的视图控制器。

Param	Type	Details
viewController	ViewController	The viewcontroller to remove 要删除的viewcontroller。 .OPTIONAL
opts	object	Any options you want to use pass to transtion.OPTIONAL

setPages(pages, opts)

设置当前导航堆栈的视图并导航到最后一个视图。 默认情况下，动画被禁用，但是可以通过将选项传递给导航控制器来启用它。您还可以将任何导航参数传递到阵列中的各个页面。

Param	Type	Details
pages	Array<{page:any, params: any}>	An array of objects, each with a page and optionally params property to load in the stack 一组对象，每个对象都有一个页面，并且可选的params属性加载到堆栈中.
opts	Object	Nav options to go with this transition.OPTIONAL

setRoot(pageOrViewCtrl, params, opts, done)

设置当前导航堆栈的根。


Param	Type	Details
pageOrViewCtrl	Page|string|ViewController	The name of the component you want to push on the navigation stack. 要在导航堆栈上推送的组件的名称。
params	object	Any NavParams you want to pass along to the next view 您想传递给下一个视图的任何NavParams。 .OPTIONAL
opts	object	Any options you want to use pass to transtion 您想要使用的任何选项都转移到转换 .OPTIONAL
done	Function	Callback function on done. Callback功能完成。

swipeBackEnabled

返回启用

viewDidEnter

当组件已经完全成为活动组件时，可以观察到订阅。

 viewDidLeave

当组件完全离开并且不再活动时，可以注册订阅。

 viewDidLoad

当加载组件时可观察到要订阅。

viewWillEnter

当组件即将加载时，可以注册订阅。

 viewWillLeave

当组件即将离开时，可以注册订阅，不再活动。

 viewWillUnload

当组件即将卸载和销毁时，可以注册订阅。