angular中组件与服务一起使用

大致思想：把接口调用写在服务里，再把服务引入组件，这样，每次复用组件时，只要改服务里的接口数据就行了。
具体实现：

1、创建组件

ng g component components/home

2、创建服务

ng g service components/home/homeservice

把服务与接口放在统一文件夹里（同级），这点不强求，只是放在一起的话，复用组件时转移起来简单。

3、在服务里写接口调用

在homeservice.ts文件里

import { HttpClient, HttpHeaders } from '@angular/common/http';
……
constructor(private http: HttpClient) { }
// 自己写方法
ProjectType(id) {
    return this.http.get<string>(apiUrl + '/ProjectInfo/GetProTypes', {
      headers: {
        Authorization: 'Bearer ' + this.token,
      },
      params: {
        SupplementId: id
      }
    }).toPromise();
  }

4、把服务引入组件

在home.ts文件里

import { HomeService } from './homeservice.service';
……
constructor(public storage: HomeService) { }

5、使用服务里的数据

 	ngOnInit()  {}
    async ProjectType(id) {
    const { result: data  }: any = await this.storage.ProjectType(id);
    const arr: any = [];
    for ( let i = 0; i < data.items.length; i++) {
      this.ProjectTypeid[i] = data.items[i].id;
    }
  }

错误排查

可能会报一个错：

解决方法：

1、在app.module.ts里添加（模块级注入）

@NgModule({
……
providers: [AppService]
……
)}

2、在组件里引用（组件级注入）

@Component({
  selector: 'app-home',
  providers: [AppService]
})