[成都|内门弟子]CSS-何俊|2021年02月26日的日报-技能树.IT修真院

发表于： 2021-02-26 23:54:38

1 896

今天完成的事情：

添加angular9的服务

angular中service的创建：

通过命令 ng g service 服务名称

或者 ng g service services/服务名称

可以创建服务名称.service.ts 的文件

service的使用：

1.首先需要在根模块中设置,

首先需要导入服务

inport { storageService } from './service/storage.service'

其次在@ngModule的providers中添加

providers:[storageService ]

2.在组件中使用

需要导入 ----> 注册 -----> 使用

import {StorageService} from '../../services/storage.service'

导入的StorageService是一个类可以通过两种方式进行注册使用

在构造函数中使用

  // 添加一个 getHeroes 方法，让它返回模拟的英雄列表
  getHeroes(): Observable<Hero[]> {
      // TODO: send the message _after_ fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return of(HEROES);
  }
}

普通创建实例

// 普通创建实例
constructor() {
  const storage= new StorageService()
  console.log(storage.name)
 }

Hero guide 添加服务

创建 HeroService

ng generate service hero

生成hero.service.ts文件

获取英雄数据

Service 可以从任何地方获取数据：Web 服务、本地存储（LocalStorage）或一个模拟的数据源

在hero.service.ts文件中

导入 Hero 和 HEROES

import { Hero } from './hero';
import { HEROES } from './mock-heroes';

添加一个 getHeroes 方法，让它返回模拟的英雄列表

  getHeroes(): Observable<Hero[]> {
      // TODO: send the message _after_ fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return of(HEROES);
  }

提供（provide） HeroService

ng generate service 会通过给 @Injectable() 装饰器添加 providedIn: 'root' 元数据的形式，用根注入器将你的服务注册成为提供

@Injectable({
  providedIn: 'root',
})

为了将 HeroService 插入到 HeroesComponent 中，需要

修改 HeroesComponent

heroes.component.ts中

导入服务

import { HeroService } from '../hero.service';

注入服务

往构造函数中添加一个私有的 heroService，其类型为 HeroService

constructor(private heroService: HeroService) {}

添加 getHeroes()

getHeroes(): void {
  this.heroes = this.heroService.getHeroes();
}

问题：

不明白服务的意义是什么

返回列表

【任务10】 [成都|内门弟子]CSS-何俊 | 2021年02月26日 的日报 中品

评论

分享到

【任务10】 [成都|内门弟子]CSS-何俊 | 2021年02月26日的日报中品