在内容列表里打开一个内容项目,注意现在页面的地址是 posts/ 后面这个数字是当前要显示的这个内容项目的 id 号。posts 斜线后面的这个 id 是这条路由里的一个必填的参数。因为组件需要用到这个参数的值才能正常显示需要的内容。
在路由地址里可以包含一些可选参数,路由里的这些可选参数是用分号分隔开的,参数的名字,等号右边是参数的值。在组件里我们也可以得到这些可选参数的值。
回到项目,打开 PostDetailsComponent 组件的视图文件,把 entity 这个值交给 gotoPosts 方法。然后打开这个组件, 找到 gotoPosts,让这个方法接收一个 entity 参数,类型是 Post 。
方法里用了 Router 上的 navigate 方法,打开 /posts 这个地址,在这个数组里再添加一个对象项目,里面添加一个 id 属性,对应的值是 entity 里的 id 。
预览
回到浏览器可以预览一下,先打开一个内容详情页面,然后按一下 Back 按钮,打开的是 posts ,这次地址里会包含 id 参数,它的值就是刚才打开的内容的 id 号。下面我们使用这个可选的 id 参数去做一些事情,比如在这个内容列表里高亮显示上一个打开的内容项目。
ActivatedRoute
回到项目,打开 PostComponent 组件,先在组件里注入一个 ActivatedRoute,在构造方法里,添加一个 private route,类型是 ActivatedRoute 。
然后在组件的 ngOnInit 生命周期方法里,订阅一下路由的 paramMap ,this.route.paramMap,用一下 subscribe 方法,给它一个方法参数,方法有个 params 参数 。
在这个组件里可以添加一个属性,名字是 selectedId ,类型是 number 。
然后在这个给 subscribe 提供的方法里,设置一下 this.selectedId 的值,它的值可以用一下 params.get ,得到 id 参数的值。在前面加上一个加号,把得到的 id 参数的值转换成数字类型的。
视图
然后打开这个组件的视图文件,在这个 app-post-item 上面,绑定一个 CSS 类,class.selected ,绑定这个类要根据一个条件,条件是 entity.id 等于组件里的 selectedId 。
样式
再打开应用的全局样式表,在这个样式表里,设置一下 .selected 这个类下面的 .list__item 的样式,把它的 background 设置成 #f8f8f8 。
上面这个 .list__item 的样式可以再稍微改一下,用 padding 设置一个统一的内边距,大小是 16px 。
预览
回到浏览器,可以预览一下。打开内容列表,按一下 Back 按钮,返回以后,在地址里会包含一个可选的 id 参数,它的值是刚才打开的内容项目的 id 号。组件里会根据这个 id 参数的值,动态的在对应的 PostItemComponent 组件上面添加一个 selected 类。这样就会在列表里高亮显示这个内容项目。