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)

在指定的索引中將一個元件插入到導航堆疊中。
 如果您需要在導航堆疊中的任何位置新增元件，這將非常有用。

屬性

ionic2中 NavController導航元件用法方法關於頁面的導航

ionic2中 NavController導航元件用法方法關於頁面的導航

ionic2中ts呼叫js的方法

java中類和元件、方法和事件的辨析

c++中呼叫Com元件的方法詳解

WPF 中RichTextBox控制元件用法細講

總結一下在VC中呼叫COM元件的方法+++VC呼叫遠端COM+元件

C++中呼叫ActiveX元件的方法詳解

Android中DatePicker控制元件用法解析

vc中呼叫Com元件的方法詳解

Vue在子元件中呼叫父元件的方法並傳參

http中get,post,put,delete方法的用法以及區別

分頁控制元件中的數字按鈕計算方法

Struts2中的get、set方法作用：Action與頁面傳值

python中關於if的用法以及with open的方法

vue中父元件獲取子元件的方法

iOS開發學習-自定義控制元件賦值問題--在model的set方法中給控制元件賦值

Spring Clould負載均衡重要元件：Ribbon中重要類的用法

vue中重新整理頁面定位導航欄（解決重新整理頁面導航欄自動定位到首頁的問題）

Vue 子元件中觸發父元件方法

vue-router中關於元件複用頁面不重新整理的問題

ionic2中 NavController導航元件用法方法關於頁面的導航

相關推薦