大致思想:把接口调用写在服务里,再把服务引入组件,这样,每次复用组件时,只要改服务里的接口数据就行了。
具体实现:
ng g component components/home
ng g service components/home/homeservice
把服务与接口放在统一文件夹里(同级),这点不强求,只是放在一起的话,复用组件时转移起来简单。
在homeservice.ts文件里
import { HttpClient, HttpHeaders } from '@angular/common/http';
……
constructor(private http: HttpClient) { }
// 自己写方法
ProjectType(id) {
return this.http.get(apiUrl + '/ProjectInfo/GetProTypes', {
headers: {
Authorization: 'Bearer ' + this.token,
},
params: {
SupplementId: id
}
}).toPromise();
}
在home.ts文件里
import { HomeService } from './homeservice.service';
……
constructor(public storage: HomeService) { }
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]
})