ionic4 -- angular 跳轉(zhuǎn)頁(yè)面

說(shuō)明:由于官方文檔還處于bate階段寝凌,很多東西實(shí)際上沒(méi)有講清楚也沒(méi)有完全解釋?zhuān)@樣造成困擾,先從最基本的跳轉(zhuǎn)頁(yè)面來(lái)講解吧。

1、引入route并新建頁(yè)面:

ionic4 與前輩們最大的不同就是通過(guò)angular引入了route拗窃,這樣每次跳轉(zhuǎn)的時(shí)候只需要直接跳轉(zhuǎn)對(duì)應(yīng)的路由地址就可以了,給了路由器上的解耦蔓榄,也解決了原來(lái)的RXjs與Events的子頁(yè)面反復(fù)跳轉(zhuǎn)重復(fù)添加監(jiān)聽(tīng)問(wèn)題【挖坑并炮,具體操作等后面進(jìn)一步深入研究】。通過(guò)翻閱源碼甥郑,我們看到:

routeload.png

源碼階段直接使用rxjs監(jiān)聽(tīng)load跳轉(zhuǎn)分配路由逃魄,通過(guò)導(dǎo)入父路由或者根路由自帶的注解和路由本身來(lái)完成類(lèi)加載。ionic4在這里直接使用的是angular的源碼澜搅。

新建頁(yè)面:
通過(guò)在cmd上輸入 ionic g 我們進(jìn)入一串選項(xiàng):

選擇新建項(xiàng)目.png

然后選擇page:

選擇page.png

輸入新建route的名稱(chēng)即可伍俘,我輸入的是detail,作為測(cè)試跳轉(zhuǎn)的頁(yè)面勉躺。

2癌瘾、Button直接點(diǎn)擊跳轉(zhuǎn)頁(yè)面:

分析源碼:


Button源碼.png

發(fā)現(xiàn)button實(shí)際上是繼承 StencliComponets.IonButton ,點(diǎn)擊進(jìn)入:

IonButton源碼.png

我們找到了 'href' 屬性這上面有明確的提示饵溅,為了強(qiáng)調(diào)妨退,我全部再拷貝一份:

 interface IonButton {
      /**
       * The type of button. Possible values are: `"button"`, `"bar-button"`.
       */
      'buttonType': string;
      /**
       * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
       */
      'color': Color;
      /**
       * If true, the user cannot interact with the button. Defaults to `false`.
       */
      'disabled': boolean;
      /**
       * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
       */
      'expand': 'full' | 'block';
      /**
       * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
       */
      'fill': 'clear' | 'outline' | 'solid' | 'default';
      /**
       * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
       */
      'href': string;
      /**
       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
       */
      'mode': Mode;
      /**
       * When using a router, it specifies the transition direction when navigating to another page using `href`.
       */
      'routerDirection': RouterDirection;
      /**
       * The button shape. Possible values are: `"round"`.
       */
      'shape': 'round';
      /**
       * The button size. Possible values are: `"small"`, `"default"`, `"large"`.
       */
      'size': 'small' | 'default' | 'large';
      /**
       * If true, activates a button with a heavier font weight.
       */
      'strong': boolean;
      /**
       * The type of the button. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"`
       */
      'type': 'submit' | 'reset' | 'button';
    }

也就是在代碼里面如此寫(xiě):

 <ion-button block href="/detail">進(jìn)入頁(yè)面</ion-button>

那么我們就可以在點(diǎn)擊此button過(guò)后即可跳轉(zhuǎn)到剛才建立的detail頁(yè)面去了

3、自定義跳轉(zhuǎn)

懷舊時(shí)期的ionic 是 navcontroller.push(component) 進(jìn)行跳轉(zhuǎn)指定頁(yè)面蜕企,那么我們新版本如何跳轉(zhuǎn)呢咬荷?
首先看看官方文檔:

官方文檔.png

官網(wǎng)提示用NavController這個(gè)類(lèi)來(lái)跳轉(zhuǎn)頁(yè)面,然而當(dāng)我翻閱源碼:

NavController源碼.png

根本沒(méi)有 push方法轻掩,不過(guò)我這里有另外的發(fā)現(xiàn):

    /**
    @params:
        @url: 路由地址
        @animated: 是否頁(yè)面跳轉(zhuǎn)動(dòng)畫(huà)
        @extras: 傳遞頁(yè)面參數(shù)
    */
    // 進(jìn)入一個(gè)頁(yè)面
    goForward(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras): Promise<boolean>;
    // 返回一個(gè)頁(yè)面
    goBack(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras): Promise<boolean>;
    // 進(jìn)入根頁(yè)面
    goRoot(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras): Promise<boolean>;

使用這三個(gè)方法幸乒,可以直接進(jìn)入我們想跳轉(zhuǎn)進(jìn)入的頁(yè)面,于是我們進(jìn)入頁(yè)面:

  //////////////////////////////home.page.html/////////////////////////////////////////
 <ion-button block (click)="onClick()">進(jìn)入頁(yè)面</ion-button>


  ////////////////////////////home.page.ts//////////////////////////////
 constructor(public nav:NavController){}

 onClick(){
    this.nav.goForward("/detail")
  }

這樣就可以進(jìn)入到detail頁(yè)面了唇牧,非常簡(jiǎn)單罕扎,帶參數(shù)的話,只用填充params就可以了丐重,源代碼還沒(méi)注釋?zhuān)@里我把注釋加上了腔召,方便查看。


2018年 12 月 3日 更新

新版本代碼.png

說(shuō)明:現(xiàn)在使用框中的三中方法進(jìn)行頁(yè)面跳轉(zhuǎn)弥臼,于是有:

  //////////////////////////////home.page.html/////////////////////////////////////////
 <ion-button block (click)="onClick()">進(jìn)入頁(yè)面</ion-button>


  ////////////////////////////home.page.ts//////////////////////////////
 constructor(public nav:NavController){}

 onClick(){
    this.nav.navigateForward("/detail")
  }

特別的宴咧,setIntent(intent:NavIntent,animated?:boolean):void; 即可以自定義命令形式的跳轉(zhuǎn),有點(diǎn)類(lèi)似于 Android原生:

    fun click(){
     Intent().apply{
          setClass(context,xxx.java.class)  
          .....
      }
    }

Intent 跳轉(zhuǎn)頁(yè)面的使用方式為:

  //////////////////////////////home.page.html/////////////////////////////////////////
 <ion-button block routerLink="/detail" (click)="onClick()">進(jìn)入頁(yè)面</ion-button>


  ////////////////////////////home.page.ts//////////////////////////////
 constructor(public nav:NavController){}

 onClick(){
    this.nav.setIntent(NavIntent.Forward,true)
  }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末径缅,一起剝皮案震驚了整個(gè)濱河市掺栅,隨后出現(xiàn)的幾起案子烙肺,更是在濱河造成了極大的恐慌,老刑警劉巖氧卧,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件桃笙,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡沙绝,警方通過(guò)查閱死者的電腦和手機(jī)搏明,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)闪檬,“玉大人星著,你說(shuō)我怎么就攤上這事〈置酰” “怎么了虚循?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)样傍。 經(jīng)常有香客問(wèn)我横缔,道長(zhǎng),這世上最難降的妖魔是什么衫哥? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任茎刚,我火速辦了婚禮,結(jié)果婚禮上撤逢,老公的妹妹穿的比我還像新娘膛锭。我一直安慰自己,他們只是感情好蚊荣,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布泉沾。 她就那樣靜靜地躺著,像睡著了一般妇押。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上姓迅,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天敲霍,我揣著相機(jī)與錄音,去河邊找鬼丁存。 笑死肩杈,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的解寝。 我是一名探鬼主播扩然,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼聋伦!你這毒婦竟也來(lái)了夫偶?” 一聲冷哼從身側(cè)響起界睁,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎兵拢,沒(méi)想到半個(gè)月后翻斟,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡说铃,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年访惜,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片腻扇。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡债热,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出幼苛,到底是詐尸還是另有隱情窒篱,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布蚓峦,位于F島的核電站舌剂,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏暑椰。R本人自食惡果不足惜霍转,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望一汽。 院中可真熱鬧避消,春花似錦、人聲如沸召夹。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)监憎。三九已至纱意,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鲸阔,已是汗流浹背偷霉。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留褐筛,地道東北人类少。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像渔扎,于是被迫代替她去往敵國(guó)和親硫狞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,327評(píng)論 25 707
  • 開(kāi)學(xué)第二天 確定了這學(xué)期的兼職工作。 整理了需要參加的考試安排残吩。 舞蹈課程 閱讀書(shū)單财忽。 覺(jué)得很充實(shí)。 晚上同一位朋...
    生彌閱讀 545評(píng)論 0 0
  • 做新媒體,要深度了解行業(yè) 深度的了解一個(gè)或者若干個(gè)行業(yè)旁瘫。 當(dāng)然祖凫,時(shí)而逗比時(shí)而深情做一個(gè)像咪蒙一樣有觀點(diǎn)沒(méi)文化的人也...
    功夫瑜伽沒(méi)空閱讀 285評(píng)論 0 0
  • 今天之后,2017年就只剩下一半了酬凳。 儀式感超強(qiáng)的中大畢業(yè)典禮惠况,為2017年上半年劃上美好的句號(hào)。 當(dāng)大屏幕上閃光...
    齊言楚羽閱讀 1,775評(píng)論 4 16
  • 活了25年宁仔,談了那么多朋友 形形色色的人見(jiàn)過(guò)不少稠屠。 也有過(guò)心動(dòng) 有喜歡 有感動(dòng) 有憧憬 。但其實(shí)離了誰(shuí) 好像都可以...
    周小耳閱讀 868評(píng)論 0 0