Angular中创建和使用服务

Angular中的服务


文章目录

  • Angular中的服务
    • 前言
    • 一、创建服务
    • 二、使用服务


前言

Angular 服务是 Angular 应用程序中用于封装可重用逻辑的类。服务在应用程序的多个组件之间共享数据和功能,而不依赖于应用程序的UI。服务可以用于诸如数据处理、与后端通信、用户身份验证等任务。

Angular 把数据与业务进行了抽离,希望我们能够单一的专注于数据的处理和数据的展示。所以就建立了服务的概念。这里的服务不是后台中的服务,本质是函数的封装。封装很多方法,对数据进行处理和返回。

以下是 Angular 服务的一些关键点:

  • 依赖注入: Angular服务通过依赖注入(DI)系统在应用程序中使用。这意味着组件或其他服务可以请求服务的实例,而不需要知道如何创建这些实例。
  • 单例模式: 默认情况下,Angular 服务是单例的,这意味着每个服务类在应用程序中只有一个实例。
  • 惰性初始化: 服务只在第一次请求时创建,之后每次请求都会返回同一个实例。
  • 服务定义: 使用 @Injectable 装饰器定义服务,并通过 providedIn 属性或在模块中手动添加来指定服务的作用域。
  • 服务使用: 组件或其他服务可以通过构造函数注入来使用服务。

一、创建服务

使用命令创建

ng g service 服务名

在这里我在services目录下创建一个data服务

ng g service services/data

在这里插入图片描述

这个组件就创建好了。

二、使用服务

使用命令创建data组件

ng g component components/data

在这里插入图片描述
在服务中写一些功能

import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'// 这里的'root'意味着服务将在整个应用中可用
})
export class DataService {constructor() { }// 示例数据 private data: any[] = [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' },{ id: 4, name: 'Item 4' },{ id: 5, name: 'Item 5' },{ id: 6, name: 'Item 6' },{ id: 7, name: 'Item 7' },{ id: 8, name: 'Item 8' },{ id: 9, name: 'Item 9' },{ id: 10, name: 'Item 10' }];// 获取数据的方法  getData(): any[] { console.log('DataService: getData() called'  + '   ' +this.data.length);return this.data;  }  // 添加数据的方法  addData(item: any) {  this.data.push(item);  } // 移除数据的方法  removeData(item: any) {  this.data = this.data.filter(x => x !== item);} 
}

在 Angular 中,@Injectable 装饰器的 providedIn 属性用于指定服务的作用域,即在哪里提供这个服务的实例。providedIn: ‘root’ 表示该服务是单例的,并且由 Angular 的根模块(通常是 AppModule)提供。

除了root,providedIn 还可以有以下几种使用方式:

  • root:服务作为单例在整个应用程序中只有一个实例。这是默认的提供方式,适用于大多数服务。
  • any:服务可以在任何模块中提供,并且可以在多个模块中多次提供,每次提供都将创建一个新的实例。
  • platform:服务只在平台(例如服务器端或 Web Worker)上提供,而不是在浏览器的主渲染线程上。
  • NgModule:服务在特定的 NgModule 中提供。这意味着服务的实例只在该模块及其导入的模块中可用。
  • module:后面跟上具体的模块类,例如 providedIn: MyModule,服务只在该模块及其导入的模块中提供。

还可以使用null,实际上是在告诉 Angular 的依赖注入系统不要自动提供这个服务,这样做之后,你需要手动在模块的 providers 数组中注册服务。

import { Injectable } from '@angular/core';@Injectable({providedIn: null // 显式地告诉 Angular 不要自动提供这个服务
})
export class MyService {// 服务逻辑
}

在模块中手动添加这个服务到 providers 数组中:

import { NgModule } from '@angular/core';
import { MyService } from './my.service';@NgModule({// ... 其他模块元数据providers: [MyService] // 手动提供服务
})
export class MyModule {// 模块逻辑
}

使用 providedIn: null 主要有几个用途:

  • 控制服务的作用域:你想要控制服务实例的作用域,比如仅在一个特定的模块及其子模块中可用。
  • 避免单例模式:虽然 Angular 默认创建服务的单例,但通过手动提供服务,你可以在不同模块中创建服务的多个实例。
  • 延迟提供服务:在某些情况下,你可能希望延迟服务的创建,直到它实际上被需要,这可以通过手动提供服务来实现。
  • 兼容性:如果你正在维护一个旧的 Angular 应用程序,并且想要保持对旧行为的兼容性,使用 null 可以给你更多的控制。

总的来说,使用 null 提供服务是一种更明确和手动的方法,它允许开发者更精确地控制服务的生命周期和作用域。然而,这也意味着你需要更仔细地管理服务的注册和使用,以避免错误或不一致的行为。

要使用服务,首先需要将其注入到组件中。你可以通过组件的构造函数注入服务:

  constructor(private dataService: DataService) { }

data.component.ts

import { Component } from '@angular/core';
import { DataService } from '../../services/data.service';
import { CommonModule } from '@angular/common';@Component({selector: 'app-data',standalone: true,imports: [CommonModule],templateUrl: './data.component.html',styleUrl: './data.component.css'
})
export class DataComponent {items: any[]=[];constructor(private dataService: DataService) { }ngOnInit() :void{this.items = this.dataService.getData(); // 调用服务方法获取数据  }addItem(): void {let iCount = this.items.length+1;console.log(iCount);this.dataService.addData( { id: iCount, name: 'Item ' + iCount})alert('Item ' + iCount+' 添加成功');}removeItem(): void {if(this.items.length===0){alert('没有数据可删');return;}console.log('删除前'+ this.items.length);let lastItem = this.items[this.items.length-1];this.dataService.removeData(lastItem);this.items = this.dataService.getData();console.log('删除后'+ this.items.length);alert(lastItem.name+' 删除成功');}
}

在imports里面加上CommonModule,不然html里面的*ngFor会有提醒。

data.component.html

<p>data works!</p><div><button (click)="addItem()">增加数据</button><button (click)="removeItem()">删除数据</button>
</div><div *ngFor="let item of items" >  <p>{{ item.name }}</p>  
</div>
<!-- @for (item of items; track $index) {<p>{{ item.name }}</p>  
} -->
<p>data works end!</p>

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { DataComponent } from './components/data/data.component';@Component({selector: 'app-root',standalone: true,templateUrl: './app.component.html',styleUrl: './app.component.css',imports: [RouterOutlet, DataComponent]
})
export class AppComponent {title = 'first-component';
}

app.component.html

<p>这个是app</p><app-data></app-data>

运行效果

在这里插入图片描述

增加按钮

在这里插入图片描述
在这里插入图片描述
删除数据
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3018215.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

MS2107 宏晶微 音视频采集芯片 提供开发资料

1. 基本介绍 MS2107 是一款视频和音频采集芯片,内部集成 USB2.0 控制器和数据收发模块、视频 ADC模块、音频 ADC 模块和音视频处理模块。MS2107可以将 CVBS、S-Video 和音频信号通过 USB接口传送到 PC、智能手机和平板电脑上预览或采集。MS2107 输出支持 YUV422 和 MJPEG 两种…

Mintegral引领短剧行业新风尚:广告变现策略助力出海应用高效增长

短剧&#xff0c;一颗正在冉冉升起的新星&#xff0c;如今成为了影视行业的新风口。《2023短剧行业研究报告》显示&#xff0c;2023年短剧市场规模达到373.9亿元&#xff0c;同比增长267.65%&#xff0c;预计2024年将超过500亿元。近年来&#xff0c;政策出台、供需促进及应用出…

(1day)致远M3 log 敏感信息泄露漏洞(Session)复现

前言 系统学习web漏洞挖掘以及项目实战也有一段时间了,发现在漏洞挖掘过程中难免会碰到一些历史漏洞,来帮助自己或是提高自己挖洞和及时发现漏洞效率,于是开始创建这个专栏,对第一时间发现的1day以及历史漏洞进行复现,来让自己更加熟悉漏洞类型以及历史漏洞,方便自己在后续的项…

六级段落匹配

一个段落最多匹配2个句子 一个段落对应&#xff1a;0-2 适当放题 找到三个对应点就可以选 每看三个句子划关键词之后再自己回忆一遍关键词&#xff0c;看了36 37 38 就复述一遍关键词看了39 40 41就又从36开始复述关键词&#xff08;334&#xff09;看到最后一句话就又从头…

安装nginx-1.25.5与ngx_http_headers_more_filter_module模块

#下载nginx的代码 curl -O http://nginx.org/download/nginx-1.25.5.tar.gz #下载headers-more-nginx-module代码 git clone https://github.com/openresty/headers-more-nginx-module#解压 tar -xzf nginx-1.25.5.tar.gzcd nginx-1.25.5#--add-dynamic-module 下载下来的目录 …

单向链表的应用

单向链表的应用 链表的概念&#xff0c;基本操作创建节点插入节点 表尾插入链表遍历为什么静态链表很少用传统链表的思考 链表的概念&#xff0c;基本操作 链表是一种物理存储单元上非连续的存储结构&#xff0c;由一系列节点&#xff08;链表中每一个元素称为节点&#xff09…

网络基础-默认网关

默认网关&#xff0c;又称缺省网关&#xff0c;缺省路由器&#xff1b;它是指在一个连接两个不同网络的设备&#xff0c;为网关设备&#xff1b;当主机需要发送数据包到另一个子网或者另一个网络时&#xff0c;它会首先检查目标地址是否在本地子网内&#xff1b;如果不在本地子…

【intro】图注意力网络(GAT)

论文阅读 https://arxiv.org/pdf/1710.10903 abstract GAT&#xff0c;作用于图结构数据&#xff0c;采用masked self-attention layers来弥补之前图卷积或类似图卷积方法的缺点。通过堆叠layers&#xff0c;让节点可以添加其邻居的特征&#xff0c;我们就可以给不同的邻居节…

创建SpringBoot3.X项目(使用IDEA2022创建SpringBoot3.X项目)

创建项目 1.点击New Project&#xff08;新建项目&#xff09; 项目基本信息 项目依赖 修改项目基本信息 1.修改配置文件类型&#xff08;按需调整&#xff09; 一版创建完成的项目都是application.properties配置文件&#xff0c;如果喜欢使用yml的可以直接修改配置文件后…

Spring-Cloud-OpenFeign源码解析-01-OpenFeign简介

OpenFeign简介 OpenFeign是一种声明式、模板化的HTTP客户端(仅在Application Client中使用)。声明式调用是指&#xff0c;就像调用本地方法一样调用远程方法&#xff0c;无需感知操作远程http请求。 OpenFeign和Feign的区别 Feign是Spring Cloud组件中一个轻量级RESTful的HT…

2024爆火的AI设备Rabbit R1到底是什么?有人说它是AI的iPhone时刻,有人说它是套壳的安卓

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

OpenHarmony usb打开报错“usb fail error code = -3, error msg = LIBUSB_ERROR_ACCESS”

一、前言&#xff1a;最近公司项目需求&#xff0c;定位要求使用国产系统&#xff0c;国产系统无非就是 统信os &#xff0c;麒麟OS, 还有这两年比较热的 OpenHarmony。于是&#xff0c;老板要求公司产品适配OpenHarmony , 跟上时代步伐。 二、在开发中使用 usb 通讯时&#x…

CH32V 系列 MCU IAP 使用函数形式通过传参形式灵活指定APP跳转地址

参考: CH32V 系列 MCU IAP 升级跳转方法 CH32V103 的 IAP 问题&#xff08;跳转及中断向量表重定位&#xff09; 1. 沁恒的RISC-V内核MCU的IAP跳转示例程序简要分析 沁恒的RISC-V内核的MCU比如CH32V203、CH32V307等系列的EVT包中IAP升级的示例程序中都是通过使能软件中断之后&…

SSM【Spring SpringMVC Mybatis】——Maven

目录 1、为什么使用Maven 1️⃣获取jar包 2️⃣添加jar包 3️⃣使用Maven便于解决jar包冲突及依赖问题 2、什么是Maven 3、Maven基本使用 3.1 Maven准备 3.2 Maven基本配置 3.3 Maven之Helloworld 4、Maven及Idea的相关应用 4.1 将Maven整合到IDEA中 4.2 在IDEA中新建…

odoo实施之各种导航设计

odoo各种基础能力&#xff1a;活动、讨论 玩转odoo&#xff0c;真有玩的体验 odoo消息提醒能力 odoo 讨论模块 odoo 通过new message触发任务 安装odoo studio进行拖拉拽设计 查阅官方文档&#xff0c;向官方提issue 欧洲和美国&#xff0c;虽然都是英语&#xff0c;但日期格式…

市场营销的酒店营销策略研究意义

在市场经济条件下&#xff0c;市场营销策略已成为企业经营管理中最重要的组成部分&#xff0c;其在企业管理中的地位日益显现出来。 然而&#xff0c;由于酒店营销环境的特殊性&#xff0c;酒店营销策略研究一直是咱们从业者研究的热点之一。 对于酒店营销策略的研究&#xf…

PHPStudy Apache或者MySQL启动以后自动停止

问题 phpstudy小皮面板中的Apache或MySQL启动以后自动停止 正在启动——已启动——已停止 总结&#xff1a;最主要的原因&#xff1a;端口冲突 端口冲突了&#xff0c;已经有其他程序占用了80、3306端口。 也就是说你的电脑上已经有了一个Apache、MySQL并且正在运行。 解决方案…

04.2.配置应用集

配置应用集 应用集的意思就是&#xff1a;将多个监控项添加到一个应用集里面便于管理。 创建应用集 填写名称并添加 在监控项里面找到对应的自定义监控项更新到应用集里面 选择对应的监控项于应用集

Verilog中4位数值比较器电路

某4位数值比较器的功能表如下。 请用Verilog语言采用门级描述方式&#xff0c;实现此4位数值比较器 参考代码如下&#xff1a; &#xff08;CSDN代码块不支持Verilog&#xff0c;代码复制到notepad编辑器中&#xff0c;语言选择Verilog&#xff0c;看得更清楚&#xff09; t…

Linux命名管道的创建及应用

目录 一、命名管道的定义即功能 1.1创建命名管道 1.2匿名管道和命名管道的区别 1.3命名管道的打开规则 1.4系统调用unlink 二、进程间命名管道的创建及使用 2.1Comm.hhp 2.2PipeServer.cc 2.3PipeClient.cc 一、命名管道的定义即功能 管道应用的一个限制就是只能在具有…