用户登录

在 Router 里面有一些 Navigation 还有处理地址的功能。在这个内容详情页面上,我们可以添加一个 Back 按钮,按一下这个按钮可以返回到内容列表页面。

回到项目,先打开 PostDetailsComponent 组件,在这个内容详情组件里面添加一个 button ,按钮文字是 Back,给这个按钮绑定一个 click 事件,点击它的时候执行 gotoPosts 这个方法。

然后再打开这个组件,在组件里添加需要的事件处理方法,名字叫 gotoPosts,这个方法的功能就是导航到指定的地址上。

这里需要用到 Router 提供的功能,先把它作为这个组件的依赖注入进来,在组件的 constructor 方法里面,添加一个 private router,它的类型是 Router。这个 Router 来自 @angular/router 。

然后在 gotoPosts 方法里面,用一下 this.router 上的 navigate 这个方法,它的第一个参数是个数组,数组里的第一个项目可以是一个地址,比如 /posts 。

预览

回到浏览器可以再试一下,打开一个内容页面,页面上会显示一个 Back 按钮,点击这个按钮,触发 click 事件,我们监听了这个事件,要做的事情是执行组件里的 gotoPosts 方法。在这个方法里用了 Router 上的 navigate 方法,打开了一个特定的地址,就是 /posts 。

用代码导航到指定的地址(router.navigate)《 Angular:路由 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点