今天完成的事情:
学习angular的添加服务与导航
创建 HeroService
ng generate service hero
获取英雄数据
在hero.service.ts 中。导入 Hero 和 HEROES,并添加一个 getHeroes 方法,让它返回模拟的英雄列表
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
getHeroes(): Hero[] {
return HEROES;
}
提供(provide) HeroService
@Injectable({
providedIn: 'root',
})
添加服务后,需修改 HeroesComponent
在heroes.component.ts中
删除 HEROES ,导入 HeroService,并注入 HeroService
import { HeroService } from '../hero.service';
heroes: Hero[];
constructor(private heroService: HeroService) {}
在 ngOnInit() 中调用
ngOnInit() {
this.getHeroes();
}
可观察(Observable)的数据:
在hero.service.ts 文件,从 RxJS 中导入 Observable 和 of 符号
import { Observable, of } from 'rxjs';
// 修改getHeroes() 方法
getHeroes(): Observable<Hero[]> {
return of(HEROES);
}
显示消息:
创建显示消息的文件夹messages
ng generate component messages
app.component.html下添加,以显示消息视图
<app-messages></app-messages>
在message.service.ts中修改
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class MessageService {
messages: string[] = [];
add(message: string) {
this.messages.push(message);
}
clear() {
this.messages = [];
}
}
并且注入到英雄服务hero.service.ts 中
import { MessageService } from './message.service';
修改这个构造函数,添加一个私有的 messageService 属性参数
// constructor(private heroService: HeroService) {}
constructor(private messageService: MessageService) { }
发送消息,修改 getHeroes() 方法
getHeroes(): Observable<Hero[]> {
this.messageService.add('HeroService: fetched heroes');
return of(HEROES);
}
将消息服务绑定到messages.component.html
<div *ngIf="messageService.messages.length">
<h2>Messages</h2>
<button class="clear"
(click)="messageService.clear()">clear</button>
<div *ngFor='let message of messageService.messages'> {{message}} </div>
</div>
问题:
应用导航和获取数据暂时不太明白,准备重复看
评论