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點程式碼中註釋的
//在這種情況下,我們正在等待導航與引用變數“#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方法。 彈出檢視將轉換到上一個檢視。
html:
<buttonion-button (click)="popView()">Call popPage</button>//新增一個點選事件呼叫移除檢視效果:事件觸發當前檢視被移除,頁面回到上一個頁面檢視
9.生命週期事件
生命週期事件在不同的導航階段觸發。 可以從任何從NavController中push/pop的元件型別中定義它們。
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> |
在檢視可以進入之前執行。 這可以在認證檢視中用作“保護”,您需要在檢視輸入之前檢查許可權 檢視可以離開時執行。 這可以在認證檢視中用作“守衛”,您需要在檢視離開之前檢查許可權 |
在某些情況下,開發人員應該能夠控制離開和進入的檢視。 為了允許這一點,NavController具有ionViewCanEnter和ionViewCanLeave方法。 與Angular路線守衛類似,但與NavController更加整合。 例如,如果您想阻止使用者離開檢視:
我們需要確保我們的navCtrl.push有一個catch來捕捉並處理錯誤。 如果你需要防止檢視進入,你可以做同樣的事情
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. |
canGoBack()
如果有一個有效的上一頁我們可以彈回來,返回true。 否則返回false。
canSwipeBack()
如果可以使用滑動回來。 如果不可能返回,或者滑回不啟用,那麼這將返回false。 如果可以返回,並且啟用滑動,那麼這將返回true。
first()
返回此導航控制器堆疊中的第一個檢視控制器。
getActive()
返回啟用頁面的檢視控制器。
getActiveChildNav()
返回活動的子導航。
getActiveChildNavs()
返回活動子導航列表。
getByIndex(index)
Param | Type | Details |
---|---|---|
index |
number |
要獲取的頁面的索引。 |
ViewController
返回與給定索引匹配的檢視控制器。
getPrevious(view)
返回給定檢視控制器之前的檢視控制器。 如果沒有傳入檢視控制器,那麼它將預設為活動檢視。
Param | Type | Details |
---|---|---|
view |
ViewController |
viewController
getSecondaryIdentifier()
獲得輔助識別符號
getType()
獲得型別
getViews()
獲得檢視
返回此導航控制器中當前的檢視堆疊。
Returns:Array<ViewController>
該導航控制器中的檢視控制器堆疊。
goToRoot()
去跟元件
indexOf(view)
遍歷檢視
返回給定檢視控制器的索引號。Returns:
number
insert(insertIndex, page, params, opts)
在指定的索引中將一個元件插入到導航堆疊中。
如果您需要在導航堆疊中的任何位置新增元件,這將非常有用。
屬性 |
相關推薦ionic2中 NavController導航元件用法方法關於頁面的導航來自自己的理解和官網翻譯 1.NavController概述 NavController是導航控制器元件的基類,如Nav和Tab。 您可以使用導航控制器導航到應用程式中的頁面。 在基本 ionic2中ts呼叫js的方法在ionic2的專案中時常需要在ts檔案中呼叫第三方庫或自定義中的js方法或變數,在實踐中,我常採用此種方法,與大家共享...... 1、第三方庫js方式 (1)安裝第三方庫:npm install XXXXX --save (2)html和ts中使用: 參考第三方J java中類和元件、方法和事件的辨析主要來源於網上資料的總結 1、類 Class 元件Component 元件對外暴露一個或多個介面,供外界呼叫。元件內部由多個類來協同實現指定的功能。對於複雜的元件,會包括很多類,還可能包含配置檔案、介面、依賴的庫檔案等,元件也可以包含或者使用其他的元件,構成更大粒度的 c++中呼叫Com元件的方法詳解轉載自:http://www.cppblog.com/woaidongmao/archive/2011/01/10/138250.html需求: 1.建立myCom.dll,該COM只有一個元件,兩個介面: IGetRes--方法Hello(), IGetResEx--方法HelloEx() 2 WPF 中RichTextBox控制元件用法細講讀取RichTextBox的內容到string,將字串儲存到資料庫的方法就不寫了,大家都會 string GetTextByRichBox(RichTextBox box) {MemoryStream s = new MemoryStream();TextRange documentTextRange = 總結一下在VC中呼叫COM元件的方法+++VC呼叫遠端COM+元件總結一下在VC中呼叫COM元件的方法 準備及條件: COM伺服器為程序內伺服器,DLL名為simpCOM.dll,該元件只有一個介面IFoo,該介面只有一個方法HRESULT SayHello(void) 在SDK中呼叫 ==================== C++中呼叫ActiveX元件的方法詳解本文以 "msscript.ocx" 作為參考 第一步: 獲取標頭檔案 #import "msscript.ocx" 得到兩個檔案 "msscript.tlh" 和 "msscript.tli" 整合下的到個頭檔案"msscript.h"如下: + Android中DatePicker控制元件用法解析關於DatePicker這個控制元件的解析有以下幾點: 1、首先是顯示問題,在Android 3.0系統以後使用DatePicker控制元件會出現一堆和日期相關的介面,比如下圖: 有沒有發現,如果使用 vc中呼叫Com元件的方法詳解需求: 1.建立myCom.dll,該COM只有一個元件,兩個介面: IGetRes--方法Hello(), IGetResEx--方法HelloEx() 2.在工程中匯入元件或型別庫 #import "元件所在目錄myCom.dll" no_namespa Vue在子元件中呼叫父元件的方法並傳參1.在父元件 methods 中定義 show 方法,供子元件呼叫。 methods:{ show(data){ this.datamsgFormSon = data console.log(this.datamsgFormSon) http中get,post,put,delete方法的用法以及區別round 歷史記錄 情況 註意 http 就是 限制 長度限制 超過 http協議是一種在網絡中進行文件傳送遵循的協議。一種無狀態的協議、http協議服務器端不跟瀏覽器端建立長久的通信連接. 建立http通信之後,服務端將文件內容傳送給瀏覽器端接收就完成一次請求。當然一個 分頁控制元件中的數字按鈕計算方法計算思想: 以當前頁碼為標杆,使用卡尺的思想,左移,右移,再左移,最後得到起始、結束位置的按鈕頁碼。 @{ var param = new { Page = 18, //當前頁 NumberButton = 5,//數字按鈕的個數 Struts2中的get、set方法作用:Action與頁面傳值在Struts2中,客戶端和伺服器之間的資料傳輸全部要用到get、set方法:用set方法 ,可以將表單中的值存入Action類。通過Struts2.0標籤,呼叫get方法將Action類中的結果資料顯示在頁面上。 python中關於if的用法以及with open的方法採用if判斷語句時,只要後面不是False 和none以及0和空資料,都是正常執行後面的程式碼。 eg:(ubuntu terminal) ipython 1.if True: print(“a”) a 2.if False: print(“a”) 3.if 10 == 1 : vue中父元件獲取子元件的方法關鍵詞:ref 在子元件child.vue中,有兩個資料: data() { return { a:1, b:2, } } 在父元件father.vue中,使用子元件: <child ref="child" .../> & iOS開發學習-自定義控制元件賦值問題--在model的set方法中給控制元件賦值在自定義控制元件的過程中,剛開始的時候碰到問題是如何給各控制元件動態賦值,最初的想法是把各控制元件屬性放在.h檔案中定義.然後在控制器內獲取資料一一賦值(可行),但是這樣就增加了控制器中的程式碼,比如給定一個場景: collectionViewCell中,有10個控制元件,需要顯示10個數據,這 Spring Clould負載均衡重要元件:Ribbon中重要類的用法Ribbon是Spring Cloud Netflix全家桶中負責負載均衡的元件,它是一組類庫的集合。通過Ribbon,程式設計師能在不涉及到具體實現細節的基礎上“透明”地用到負載均衡,而不必在專案裡過多地編寫實現負載均衡的程式碼。 比如,在某個包含Eureka和 vue中重新整理頁面定位導航欄(解決重新整理頁面導航欄自動定位到首頁的問題)1.頁面重新整理時,判斷URL地址與左邊導航欄定位是否相符(重點看圖3的判斷) PS1:window.location.hash返回從井號#開始的地址,例如http://aaa.com/#/action/aboutUs,window.location.hash獲取的是#/ Vue 子元件中觸發父元件方法父元件中: <子元件名 @close="close"></子元件名> methods: { close(id) { this.$confirm('此操作將永久刪除該檔案, 是否繼續?', '提示', { confir vue-router中關於元件複用頁面不重新整理的問題業務描述: 當前頁面是一個帶引數的頁面,如下: 頁面下方有tab,點選其一個的跳轉路由是: 由此,發現問題,地址改變了,但是頁面資料沒有重新整理。 查閱後,此情況屬於元件複用的情況。 解決方法: 通過watch監聽路由變化: watch: { ' |
---|