在 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 。