Angular4-路由參數

參數是我們經常用到的東西,在Angular中也有這個玩意,透過路由參數的切換,可以讓網站的建立變得更加靈活。

舉例來說文章、商品等等的都是有多筆資料的,如隨身碟有多個型號、鞋子有多雙款式,這些都可以直接透過路由參數直接建立好一個頁面,再透過路由參數顯示相對應的畫面。


廢話不多說,來看看吧!

首先我在app-routing-module.ts這支檔案中,先將路由中設定MyPage的路由需要帶一個type參數

在這邊可以看到,如果要設定參數必須加上冒號+參數名稱「:type」

接著我們回到網誌列輸入「http://localhost:4200/MyPage/」這個路由,會發現直接轉回首頁了

為什麼?

因為這次並沒有帶入type參數,導致找不到相對應的路由,進而轉回根目錄底下,即使有設定根目錄的轉向路由「redirectTo: 'MyPage/:type'」,因為路由只會轉向一次的特性,所有頁面會停留在根目錄底下。

 


因此,我們要對應到這個路由的話,必須在後方帶一個參數,正確的路由應該是

「http://localhost:4200/MyPage/1」

緊接著再來試著從Angular中取得相對應的參數吧!

先到page2.ts的檔案中加入import

再到建構子中注入路由的服務

接著取得路由的type參數

 

並將資料綁到page2.html頁面中

接著再回到網頁中,會發現網址列的參數已經可以被取得,並且顯示在頁面上了。

 


接著我們來增加一個事件,點擊後可以更改路由

再到ts檔案中宣告要轉向的路由是/MyPage + 當前頁面的數字+1註※type要宣告成string型別,不然轉型時會有提示,不轉型直接相加會變成1+1=11  XD

接著我們回到頁面中,瘋狂的點下按鈕,發現路由的參數會不斷的+1+1+1對吧?

.

.

.

.

.

.

騙你的,應該是進入的路由參數為1,只有第一次點擊時會變成2,再點的話依舊是2不會改變了。

這是為什麼呢?

因為這段是透過快照取得參數,也就是說在路由進入為1的時候,即把1給保存下來了,由於路由參數變更時,並不是路由改變,因此不會有刪除元件,再重新建立元件的情形。

在按下按鈕將路由改變為2的時候,ngOnInit的事件,會在取得1的值,並存回type,1+1=2,答案就揭曉了。


遇到問題總是要解決,那解決的方式呢?

來把程式碼修改一下

改完過後存檔,在點選按鈕就會發現路由可以不斷+1+1+1了

來做個小結

1.路由設定時如果有參數,則會一同比對參數

2.路由參數的表示方式 :參數名稱

3.認識元件的建立時機,以及載入完成的事件ngOnInit()

4.元件屬性的快照以及解決方式


LINE討論群FB討論區

歡迎您的加入,讓這個社群更加美好!

聯絡方式:
FaceBook
E-Mail