发表于: 2021-06-05 22:54:45

0 1945


今天完成的事情:angular Service(服务),的学习;


明天计划的事情:angular学习资料“管道、指令”学习;JS知识巩固


收获:

angular Service(服务):

angular 官方认为组件不应该直接获取或保存数据, 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务。

而服务就充当着数据访问,逻辑处理的功能。把组件和服务区分开,以提高模块性和复用性。通过把组件中和视图有关的功能与其他类型的处理分离开,可以让组件类更加精简、高效,这是官方的一些定义。

依赖注入:

注入器是主要的机制。Angular 会在启动过程中为你创建全应用级注入器以及所需的其它注入器。你不用自己创建注入器。
该注入器会创建依赖、维护一个容器来管理这些依赖,并尽可能复用它们。
提供商是一个对象,用来告诉注入器应该如何获取或创建依赖。


1,创建服务(Service):创建一个名叫 hero 的服务。

ng generate service hero  //  简写 ng g s hero  (一样创建);

生成如下服务块,

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  constructor() { }
}

,2,在app.module.ts 中引入创建好的服务,并加以声明:

//引入服务
import { HeroService } from './hero.service';
  // 定义服务
  providers: [HeroService],


3,在需要使用的组件中引入:

//引入服务
import { HeroService } from '../../hero.service';

  // 初始化
  constructor(public storage:HeroService) { 

    let s=this.storage.get()

    console.log(s);
  }



服务的 获取数据:

服务块 可以从任何地获取数据:Web 服务、本地存储(LocalStorage)或一个模拟的数据源。从组件中移除数据访问逻辑,意味着将来任何时候你都可以改变目前的实现方式,而不用改动任何组件。


服务(Service) 提供(provide):

在要求 Angular 把 服务 注入到 所要用到的组件中之前,须先把这个服务提供给依赖注入系统。

要用一个注入器注册它。注入器就是一个对象,负责在需要时选取和注入该提供商。默认情况下,Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式,为该服务把提供商注册到根注入器上。


修改需要用服务(Service) 的组件模块;

注入服务(Service):往构造函数中添加一个私有的 Service,其类型为 Service

constructor(private heroService: Service) { }

在服务块中添加 getHeroes()

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

}

在调用服务中的值,来实现昨天没完成的任务,服务保存数据,组件的获取值并展示。




返回列表 返回列表
评论

    分享到