今天完成的事情

测试昨天写的通用get服务，其实是不能用的，主要原因是URLSearchParams这个类在传入参数后它本身就是一个Object,我们服务器要求的参数是字符串。
所以，考虑在传入数据前，将数据全部转换成字符串，想了半天，想不出好办法，就这样写了一个方法：

 private sortData(form): string {
    let searchData: string = '';
    searchData += form.type ? `type=${form.type}` : '';
    searchData += (form.status) ? (searchData ? `&status=${form.status}` : `status=${form.status}`) : '';
    searchData += (this.dtf) ? (searchData ? `&createAt=${this.dtf.valueOf()}` : `createAt=${this.dtf.valueOf()}`) : '';
    searchData += (this.dtt) ? (searchData ? `&updateAt=${this.dtt.valueOf()}` : `updateAt=${this.dtt.valueOf()}`) : '';
    console.log(`搜索参数为：${searchData}`);
    return searchData;
  }

这样转换出来的数据直接传入get请求的seach参数即可。
那么Http的get请求需要什么参数：

    /**
     * Performs a request with `get` http method.
     */
    get(url: string, options?: RequestOptionsArgs): Observable<Response>;

好的，我们可以看出它的参数真的就是一个RequestOptionsArgs类型数据，那么RequestOptionsArgs是什么？

/**
 * Interface for options to construct a RequestOptions, based on
 * [RequestInit](https://fetch.spec.whatwg.org/#requestinit) from the Fetch spec.
 *
 * @experimental
 */
export interface RequestOptionsArgs {
    url?: string | null;
    method?: string | RequestMethod | null;
    /** @deprecated from 4.0.0. Use params instead. */
    search?: string | URLSearchParams | {
        [key: string]: any | any[];
    } | null;
    params?: string | URLSearchParams | {
        [key: string]: any | any[];
    } | null;
    headers?: Headers | null;
    body?: any;
    withCredentials?: boolean | null;
    responseType?: ResponseContentType | null;
}

这就是一个接口，按照接口，在get请求中我们只需要传入一个search参数进去即可，search参数可以是string,ResquestMethod,{}类型的。
所以上面我们转换的字符串就可以用在get请求中，请求就这样写：

this.getFun = this.http.get(url, {search: params)});
//params保存的是上面我们返回的字符串参数

这样，我们就完成了一个含参的get请求。



对于上面的字符串转换方法一点也不满意，怎么办？
也不知道从哪里，总之历经各种磨难：

  private sortData(form): string {
    let params = new URLSearchParams();
    form.type ? params.set('type', form.type) : '';
    form.status ? params.set('status', form.status) : '';
    this.dtf ? params.set('createAt', String(this.dtf.valueOf())): '';
    this.dtf ? params.set('updateAt', String(this.dtt.valueOf())): '';
    console.log(String(params));
    return params;
  }

很明显，这次我们返回的是一个URLSearchParams的实例，按照get方法的接口要求，我们这样写是没有问题的，可是呢，就就是请求不到数据，为啥？
经过简单测试：this.http.get(url,{search: 'type=1'})，这样是可以拿到数据的。
那么，我大概知道了服务值要求的数据只能是string类型的，所以只要简单改一个就可以实现请求：
this.http.get(url, {search: String(params)});
这个是没有问题的。


以上就是今天一天干了事情，这个进度实在是。。。

明天计划的事情

今天仔细琢磨了一下，由于输入组件和展示组件两个组件是兄弟组件，可以使用中间人模式来实现数据传输，输入组件和父组件属性绑定，将数据传入父组件，父组件再和展示组件事件绑定，将数据传给展示组件。很完美。
然而有一个小问题，父组件为什么要和展示组件进行事件绑定，这个事件从哪里来，以什么形式来触发？这个问题值得深思。好像是可以通过服务来实现的，明天去看一遍官网的组件间通讯。通透了再来做。
明天一天能做完这个就不错了。

遇到的问题

今天遇到的问题已经解决了，就差明天的问题了。

收获

感觉有时候太执着了，什么东西都想着通用性，想了很久，勉强找个一个方式来实现，但是代码越往后写发现通用性其实也不那么强了。
现在想想其实通用性不必过分追求，初学阶段如果一时实现不了，就暂时不要考虑通用性这个问题。等写出几个类似的功能/组件之后，如果真的可以抽出一个通用的服务/组件到时候再重构也不迟。