发表于: 2019-11-05 21:59:12
1 1216
今天完成的事:对angular的服务和http有了了解,知道当前要学什么之前错在哪了
明天要完成的事:彻底搞懂如何使用服务和http会用理论到是已经理解
难题:我能理解总体概念和一部分的细节理论但是具体操作还是不太清楚,
收获:
师兄发现我有个地方理解错了:服务是通过根注入器将你的服务注册成为提供商;提供商用来创建和交付服务:
通过这个注入根
发现我之前忽略了一个服务没有了解 :
服务:组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。而且应该聚焦于展示数据,而把数据访问的职责委托给某个服务。
angular怎样展示数据通过服务发起http请求获取数据,在将数据传给组件,组件就负责展示数据
创建一个服务:首先在接口类创建一个方法:
getHeroes(): Hero[] {
return HEROES;
}
并声明
然后在你要调用服务的时候:在需要调用的组件里引入这个服务类接口
import { HeroService } from '../hero.service';
并声明你需要的属性给予属性一个声明在使用组件去展示这个属性
比如heroes: Hero[];
并在组件中声明一个实例用来访问操作这个方法或者说用来调用
往构造函数中添加一个私有的heroService
,(这个heroservice是可以改变的)其类型为HeroService(是来自于什么)
。
constructor(private heroService: HeroService) { }
并在组件内创建一个函数,以从服务中获取这些英雄数据
getHeroes(): void {
this.heroes = this.heroService.getHeroes();
}
ngOnInit() {
this.getHeroes();
}
当Angular创建HeroesComponent时,依赖注入系统就会把这个heroService参数设置为HeroService的单例对象。
以上这些步骤需要分清是在组件内还是在服务接口类内
并且
可观察(Observable)的数据
HeroService.getHeroes()
的函数签名是同步的,它所隐含的假设是总是能同步HeroService
获取英雄列表数据。而HeroesComponent
也同样假设能同步取到getHeroes()
的结果。
使用RxJS的of()
函数来模拟从服务器返回数据。
this.heroes = this.heroService.getHeroes();
getHeroes(): Observable<Hero[]> {
return of(HEROES);
}
of(HEROES)会返回一个 Observable<Hero[]>,它会发出离散值,这个值就是这些模拟英雄的碎片
这两步的作用就是将请求的数据变成单个值,这个值就是这些模拟英雄的碎片。(就是返回一个里面全都是数值的数组而不是一个里面全部都是对象的数组)
因为你返回的是一个数组所以你前面组件里的数据格式也要改变
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes);
}
创建MessageService
使用CLI在src/app
中创造MessageService
。
ng generate service message
并将这个服务接口类引入这个service
import { MessageService } from './message.service';
修改这个构造函数,一个添加的私有messageService
属性参数。角在将会创建³³ HeroService
时把MessageService
的单例注入到这个属性中。
constructor(private messageService: MessageService) { }
简单描述一下http的内容:
http是和ajax类似的一种功能组件,用于和远程服务器通讯的一种组件;
要使用这个组件首先得在根目录导入这个组件:
要让 HttpClient
在应用中随处可用,请
打开根模块
AppModule
,从
@angular/common/http
中导入HttpClientModule
符号,
评论