天天看點

Angular應用裡具有back功能的按鈕實作

需求:從dashboard頁面點選任何一個hero:

Angular應用裡具有back功能的按鈕實作

可以進入明細頁面,注意url的變化。

Angular應用裡具有back功能的按鈕實作

期望做到的行為是,點選Go back按鈕,回到dashboard頁面。

下面是具體實作:

(1) 在hero detail Component裡導入Location,借助該module實作操縱浏覽器的跳轉行為。

Angular應用裡具有back功能的按鈕實作

(2) 在hero detail Component裡給click綁定處理函數goBack:

Angular應用裡具有back功能的按鈕實作

使用單步調試可以觀察到click事件響應函數是如何被調用到的:

Angular應用裡具有back功能的按鈕實作