根据路由地址里的这个 Id 参数的值,可以请求服务端,获取到对应的内容数据,然后把数据值填到这个内容表单上。回到项目,打开 PostEditComponent 组件。
组件里要用到 route 还有 postService 服务,在构造方法里把它们注入进来,private route,类型是 ActivatedRoute 。再添加一个 private postService,类型是 PostService。
在组件的 ngOnInit 方法里面,也就是在初始化组件的时候,用一下 this.route.paramMap,它是一个 Observable,我们需要根据它上面的 id 参数值,去请求服务端应用得到对应的内容数据。
switchMap
先给它接上一个管道,用一下 pipe 方法,里面可以安排一个 switchMap 操作员,这个 switchMap 来自 rxjs/operators。
paramMap 这个 Observable 上生产出来的值,在这里可以得到,名字可以是 params ,方法让它返回另外一个 Observable,用一下 this.postService 服务上的 show 这个方法,这个方法返回的是使用了 Http 客户端的 get 方法返回的值,也就会是一个 Observable 。
准备一下方法需要的内容的 Id ,用 params 上的 get ,得到路由地址里的 id 参数的值,前面可以加上一个加号,把它转换成数字值。
接着再用一个 subscribe 订阅一下,提供一个方法,参数值的名字可以叫 data ,这个 data 值应该是 postService 上的 show 方法返回来的那个 Observable 上生产出来的数据,也就是请求服务端接口得到的响应数据。
得到了响应的数据以后,用一下 this.postEditForm 上的 patchValue,把得到的数据交给这个方法。patchValue 还有 setValue 都可以设置表单的值。只不过 patchValue 更像是打补丁。
预览
回到浏览器先预览一下,现在这个内容编辑页面上的表单里面,就会出现当前要编辑的这个内容的值了。