angular6--------------服务

本文介绍Angular框架中如何通过创建共享服务来实现组件间的数据访问。服务作为组件与数据之间的桥梁,利用依赖注入机制确保组件专注于展示逻辑而不直接操作数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务。服务是在多个“互相不知道”的类之间共享信息的好办法,采用依赖注入机制讲服务注入到组件中去。

开始使用

创建共享服务

ng generate service hero

结果如下:

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

@Injectable({
  providedIn: 'root',   // 表示提供商注册到顶层根注入器上,当你在顶层提供该服务时,Angular 就会为 HeroService 创建一个单一的、共享的实例,并把它注入到任何想要它的类上
})
export class HeroService {

  constructor() { }

}

   组件中使用服务(三个步骤)

  • 导入 HeroService 服务

import { HeroService } from '../hero.service';
  • 声明 HeroService 服务

@Component({
  selector: 'app-hero',
  ...
  providers: [HeroService]
})
  • 注入 HeroService 服务--采用依赖注入机制

export class HeroComponent implements OnInit {
  constructor(private heroService: HeroService) { }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值