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功能的按钮实现
Angular应用里具有back功能的按钮实现
Angular应用里具有back功能的按钮实现

要获取更多Jerry的原创文章,请关注公众号"汪子熙":
Angular应用里具有back功能的按钮实现