Angular 组件通信学习笔记
本文主要是参考PluralSight的学习视频，以及自己在实际项目中遇到的问题，记录重难点而形成的学习笔记。
一. Over View:
二. Communicate through Template.
三. Communicate through Service.
1. OverView:
2. Propery Bag:
Service Scope and lifetime.
a. Singleton
b. Module--> Module Scope, can share service for the module
Component-->Component Scope, only available for the component and it’s children component.
3. Basic Statement Managment:
export class HeroService {
private heroListURL = "http://localhost:8888/hero/list";
private heroFindByNameLikeURL = "http://localhost:8888/hero/findByNameLike/";
private heroUpdateURL = "http://localhost:8888/hero/update";
private heroSaveURL = "http://localhost:8888/hero/save";
private heroDeleteURL = "http://localhost:8888/hero/delete/";
private heros: Hero[];
httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
constructor(private httpClient: HttpClient,public messageService: MessageService) {
}
getHeroes(): Observable<Hero[]>{
this.messageService.add('HeroService: fetched heroes');
// To Avoid to retive data from back end every time.
if (this.heros) {
return of(this.heros);
} else {
return this.httpClient.get<Hero[]>(this.heroListURL).pipe(
tap(data => this.heros = data)
);
}
}
getHero(id: number): Observable<Hero> {
const foundItem = this.heros.find(item=>item.id == id)
return of(foundItem);
}
updateHero(hero: Hero): Observable<any> {
this.messageService.add(`HeroService: updated hero id=${hero.id}`);
return this.httpClient.put(this.heroUpdateURL, hero, this.httpOptions);
}
addHero(hero: Hero): Observable<Hero> {
this.messageService.add(`HeroService: save Hero`);
return this.httpClient.post<Hero>(this.heroSaveURL, hero, this.httpOptions).pipe(
tap(data=> this.heros.push(data))
);
}
deleteHero(hero: Hero): Observable<any> {
this.messageService.add(`HeroService: delete hero id=${hero.id}`);
return this.httpClient.delete(this.heroDeleteURL+hero.id).pipe(
tap(data=> {
const foundIndex = this.heros.findIndex(data);
if(foundIndex>-1){
this.heros.splice(foundIndex,1);
}
})
);
}
searchHeroes(name: string): Observable<Hero[]>{
if (!name.trim()) {
// if not search term, return empty hero array.
return of(this.heros);
}
this.messageService.add(`HeroService: findByNameLike: name = ${name}`);
return this.httpClient.get<Hero[]>(this.heroFindByNameLikeURL+name);
}
}
4. Communication through service notification. (Subject VS BehaviorSubject).
1. Subject.
a. basic knowledge:
b. workflow
c. example:
a>. Search
b. select different Hero to display corresponsing information.
Hero List:
onSelected(hero: Hero): void{
this.heroService.changeSelectedHero(hero);
}
others:
export class HeroShellDetailComponent implements OnInit, OnDestroy{
hero: Hero | null;
herosub: Subscription;
constructor(private heroService: HeroService){
}
ngOnInit(): void {
this.herosub = this.heroService.selectedHeroChange.subscribe(
selectedProduct => this.hero = selectedProduct
);
}
ngOnDestroy(): void {
this.herosub.unsubscribe();
}
2. BehaviorSubject.
the difference, the BehaviorSubject can keep the last selected record. so, when nav back, the original informaiton still exist.
四. Communicate through Routing.
1. Required Params.
2. Query Params.
3. Option Params.
------------恢复内容开始------------
本文主要是参考PluralSight的学习视频，以及自己在实际项目中遇到的问题，记录重难点而形成的学习笔记。
一. Over View:
二. Communicate through Template.
三. Communicate through Service.
1. OverView:
2. Propery Bag:
Service Scope and lifetime.
a. Singleton
b. Module--> Module Scope, can share service for the module
Component-->Component Scope, only available for the component and it’s children component.
3. Basic Statement Managment:
export class HeroService {
private heroListURL = "http://localhost:8888/hero/list";
private heroFindByNameLikeURL = "http://localhost:8888/hero/findByNameLike/";
private heroUpdateURL = "http://localhost:8888/hero/update";
private heroSaveURL = "http://localhost:8888/hero/save";
private heroDeleteURL = "http://localhost:8888/hero/delete/";
private heros: Hero[];
httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
constructor(private httpClient: HttpClient,public messageService: MessageService) {
}
getHeroes(): Observable<Hero[]>{
this.messageService.add('HeroService: fetched heroes');
// To Avoid to retive data from back end every time.
if (this.heros) {
return of(this.heros);
} else {
return this.httpClient.get<Hero[]>(this.heroListURL).pipe(
tap(data => this.heros = data)
);
}
}
getHero(id: number): Observable<Hero> {
const foundItem = this.heros.find(item=>item.id == id)
return of(foundItem);
}
updateHero(hero: Hero): Observable<any> {
this.messageService.add(`HeroService: updated hero id=${hero.id}`);
return this.httpClient.put(this.heroUpdateURL, hero, this.httpOptions);
}
addHero(hero: Hero): Observable<Hero> {
this.messageService.add(`HeroService: save Hero`);
return this.httpClient.post<Hero>(this.heroSaveURL, hero, this.httpOptions).pipe(
tap(data=> this.heros.push(data))
);
}
deleteHero(hero: Hero): Observable<any> {
this.messageService.add(`HeroService: delete hero id=${hero.id}`);
return this.httpClient.delete(this.heroDeleteURL+hero.id).pipe(
tap(data=> {
const foundIndex = this.heros.findIndex(data);
if(foundIndex>-1){
this.heros.splice(foundIndex,1);
}
})
);
}
searchHeroes(name: string): Observable<Hero[]>{
if (!name.trim()) {
// if not search term, return empty hero array.
return of(this.heros);
}
this.messageService.add(`HeroService: findByNameLike: name = ${name}`);
return this.httpClient.get<Hero[]>(this.heroFindByNameLikeURL+name);
}
}
4. Communication through service notification. (Subject VS BehaviorSubject).
1. Subject.
a. basic knowledge:
b. workflow
c. example:
2. BehaviorSubject
四. Communicate through Routing.
1. Required Params.
2. Query Params.
3. Option Params.
------------恢复内容结束------------
学习，总结，沉淀，提高。
浙公网安备 33010602011771号