[Angular实战网易云]——4、获取轮播图(一)

创建服务

在service路径下执行创建服务命令

ng g s home

@Injectable({
   
  providedIn: ServicesModule, // 哪一个模块提供的
})

其中HomeService中有一个providedIn属性，代表着这个一个服务是谁提供的；默认值‘root’代表是appModule提供的。但是这次结构是将子服务放进总服务中，所以providedIn值应改为ServicesModule。这样做的好处：如果这测的服务没有被用到，就会被摇数优化给摇掉(tree shaking，一种编译优化的方式。可以自动清除你引用了但却未使用的模块或包，减小打包体积。)

服务实现

home.service

export class HomeService {
   
  constructor(
    private http: HttpClient,
    @Inject(API_CONFIG) private uri: string // 注入令牌
  ) {
   }

  // 获取轮播图
  getBanners(): Observable<Banner[]> {
   
    return this.http
      .get(this.uri + "banner")
      .pipe(map((res: {
    banners: Banner[] }) => res.banners)); //  一般不知道类型，可以使用any
  }
}

service.module

export const API_CONFIG = new InjectionToken("ApiconfigToken");

@NgModule({
   
  declarations: [],
  imports: [],
  providers: [{
    provide: API_CONFIG, useValue: "http://localhost:3000/" }],
})

ApiconfigToken是什么意思？
angular提供一个服务，都有一个令牌以及令牌的值，值可以是字符串或者类，令牌也可以直接写成字符串，但是可读性不好࿰