[Angular] 笔记 10:服务与依赖注入

什么是 Services & Dependency Injection?
chatgpt 回答:


在 Angular 中,Services 是用来提供特定功能或执行特定任务的可重用代码块。它们可以用于处理数据、执行 HTTP 请求、管理应用程序状态等。Dependency Injection(依赖注入)是 Angular 框架用来管理组件之间依赖关系的机制。通过依赖注入,Angular 能够将一个对象实例注入到另一个对象中,使得组件可以访问所需的服务或其他依赖项,这样可以更轻松地管理代码、提高可维护性,并促进代码重用。在 Angular 中,通过依赖注入将服务注入到组件中,使得组件能够使用这些服务的功能而无需自己创建实例或处理其生命周期。


Youtube Tutorial:

当前的 Angular app 中有 list 组件和 detail 组件,pokemons 数组放在list 组件中,这是一种非常糟糕的设计模式,即使这只是一个小小的 pokemon app。

接下来要做的是,抽象化 pokemons 数组,将其改成一个服务,之后就可以将此服务注入到 app 其他任意位置。

1 创建服务

1.1 有很多方法,例如 vscode terminal 运行命令:

ng g service <my-service-name>

1.2 或者使用 Angular Files extension:

首先在 app 文件夹下新建一个文件夹 services,右键此 services 文件夹,选择 Generate Service,服务名称设为 pokemon:
在这里插入图片描述
项目结构:

在这里插入图片描述

2 将服务加到 module 里

pokemon-base.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PokemonListComponent } from './pokemon-list/pokemon-list.component';
import { PokemonDetailComponent } from './pokemon-detail/pokemon-detail.component';
import { PokemonService } from '../services/pokemon.service';@NgModule({declarations: [PokemonListComponent, PokemonDetailComponent],imports: [CommonModule],exports: [PokemonListComponent, PokemonDetailComponent],providers: [PokemonService],  // providers 中增加新建 service
})
export class PokemonBaseModule {}

3 service 里创建整个 app 都可使用的函数

pokeman.service.ts

import { Injectable } from '@angular/core';
import { Pokemon } from '../models/pokemon';@Injectable({providedIn: 'root',
})
export class PokemonService {constructor() {}// 此函数整个 app 都可以使用getPokemons(): Pokemon[] {return [// Pokemon: 精灵宝可梦{id: 1,name: 'pikachu', // 皮卡丘type: 'electric',isCool: false,isStylish: true,},{id: 2,name: 'squirtle', // 杰尼龟type: 'water',isCool: true,isStylish: true,},{id: 3,name: 'charmander', // 小火龙type: 'fire',isCool: true,isStylish: false,},];}
}

同时,删除 pokeman-list.component.ts 中对应的 pokemons 数组。

4 依赖注入

需要用到依赖注入时,就将依赖注入放进构造函数中。

pokeman-list.component.ts 完整代码如下:

import { Component, OnInit } from '@angular/core';
import { Pokemon } from 'src/app/models/pokemon';
import { PokemonService } from 'src/app/services/pokemon.service';@Component({selector: 'app-pokemon-list',templateUrl: './pokemon-list.component.html',styleUrls: ['./pokemon-list.component.css'],
})
export class PokemonListComponent implements OnInit {pokemons!: Pokemon[];// 修改 constructorconstructor(private pokemonService: PokemonService) {}handleRemove(event: Pokemon) {this.pokemons = this.pokemons.filter((pokemon: Pokemon) => {return pokemon.id !== event.id;});}ngOnInit(): void {// 填充 pokemons 属性this.pokemons = this.pokemonService.getPokemons();}
}

运行 ng serve, 可以删除 pokemon, console 也没有错误, 这说明服务确实在运行。

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浅谈互联网架构演变

更好的阅读体验 \large{\color{red}{更好的阅读体验}} 更好的阅读体验 前言 可以将某个项目或产品的架构体系按照如下方式分层&#xff1a; 业务层面&#xff1a;项目业务体系技术层面&#xff1a; 数据架构&#xff1a;数据持久层策略应用架构&#xff1a;应用层的实现方式 …

云原生Kubernetes系列 | Kubernetes Secret及ConfigMap

云原生Kubernetes系列 | Kubernetes Secret及Configmap 1. Secret及Configmap使用背景简介2. Secret2.1. Secret创建方式2.1.1. 命令行方式2.1.2. 文件方式2.1.3. 变量方式2.1.4. YAML文件方式2.2. Secret使用方式2.2.1. 用于传递配置文件2.2.3. 用于传递变量3. ConfigMap1. Se…

CPU亲和性和NUMA架构

何为CPU的亲和性 CPU的亲和性&#xff0c;进程要在某个给定的 CPU 上尽量长时间地运行而不被迁移到其他处理器的倾向性&#xff0c;进程迁移的频率小就意味着产生的负载小。亲和性一词是从affinity翻译来的&#xff0c;实际可以称为CPU绑定。 在多核运行的机器上&#xff0c;…

AlignBench:量身打造的中文大语言模型对齐评测

对齐&#xff08;Alignment&#xff09;&#xff0c;是指大语言模型&#xff08;LLM&#xff09;与人类意图的一致性。换言之&#xff0c;就是让LLM生成的结果更加符合人类的预期&#xff0c;包括遵循人类的指令&#xff0c;理解人类的意图&#xff0c;进而能产生有帮助的回答等…

SadTalker数字人增加视频输出mp4质量精度

最近在用数字人简易方案&#xff0c;看到了sadtalker虽然效果差&#xff0c;但是可以作为一个快速方案&#xff0c;没有安装sd的版本&#xff0c;随便找了个一键安装包 设置如上 使用倒是非常简单&#xff0c;但是出现一个问题&#xff0c;就是输出的mp4都出马赛克了 界面上却…

Servlet见解2

4 创建servlet的三种方式 4.1 实现Servlet接口的方式 import javax.servlet.*; import javax.servlet.annotation.WebServlet; import java.io.IOException;WebServlet("/test1") public class Servlet1 implements Servlet {Overridepublic void init(ServletConf…

怎么实现Servlet的自动加载

在实际开发时&#xff0c;有时候会希望某些Servlet程序可以在Tomcat启动时随即启动。但在默认情况下&#xff0c;第一次访问servlet的时候&#xff0c;才创建servlet对象。 如果servlet构造函数里面的代码或者init方法里面的代码比较多&#xff0c;就会导致用户第一次访问serv…

制作一个可以离线安装的Visual Studio安装包

须知 前提条件&#xff0c;需要电脑可以正常上网且网速还行&#xff0c;硬盘可以空间容量足够大&#xff0c;怎么判断容量够用&#xff1f;由组件数量的多少来决定。Visual Studio 频道和发布节奏 https://learn.microsoft.com/zh-cn/visualstudio/productinfo/release-rhythm…

AutoSAR(基础入门篇)3.2-Autosar中RTE的Ports【S/R】与【C/S】

目录 一、RTE的Ports【S/R】 1、特征 1.1、扮演SWCs和BSW的交流途径 1.2、其他特征

简析SoBit 跨链桥图文教程

从BTC网络到Solana网络桥接BRC20 1.打开SoBit平台&#xff1a;在您的网络浏览器中启动SoBit Bridge应用程序。 2.连接您的钱包&#xff1a; 选择SoBit界面右上角的比特币网络来连接您的数字钱包。 3.选择源链、目标链和您想桥接的代币&#xff1a; 从下拉菜单中选择’BTC’作为…

讯飞星火认知大模型智能语音交互调用

随着国内外大模型热度的兴起&#xff0c;依托于大模型的智能化&#xff0c;传统的人机交互已经不能满足人们交互的需求。而结合语音和大模型的交互拜托传统互联网获取知识的文字限制&#xff0c;用语音也可以轻松获取想要的知识和思路。 一、大模型智能语音交互调用实现思路 …

华为ipv6配置之ospf案例

R1 ipv6 ospfv3 1 router-id 1.1.1.1 //必须要手动配置ospf id&#xff0c;它不会自动生成 interface GigabitEthernet0/0/0 ipv6 enable ipv6 address 2000::2/96 ospfv3 1 area 0.0.0.0 interface LoopBack0 ipv6 enable ipv6 address 2001::1/96 ospfv3 1 area 0.0.0.0 R2…

创新科技赋能,易点易动设备管理系统助力企业实现设备管理升级

在当今竞争激烈的商业环境中&#xff0c;企业对设备管理的要求越来越高。高效的设备管理不仅可以提高生产效率&#xff0c;降低成本&#xff0c;还可以确保设备安全和可靠性。然而&#xff0c;传统的手工管理方式已经无法满足企业快速发展的需求。为了解决这一问题&#xff0c;…

electron autoUpdater自动更新使用示例 客户端+服务端

封装好的 update.js 模块 use strict; const { autoUpdater } require(electron) // 更新检测 // https://www.electronjs.org/zh/docs/latest/api/auto-updaterconst checkUpdate (serverUrl) >{const updateUrl ${serverUrl}/update?platform${process.platform}&am…

论文阅读——TÜLU

How Far Can Camels Go? Exploring the State of Instruction Tuning on Open Resources 统一输入格式&#xff1a;将所有数据集格式化为遵循聊天机器人风格的模式&#xff0c;以统一指令数据集的各种风格和格式。用户输入和目标话语之前特殊token&#xff1a;&#xff0c;助手…

Xcode 编译速度慢是什么原因?如何提高编译速度?

作为一个开发者&#xff0c;我们都希望能够高效地开发应用程序&#xff0c;而编译速度是影响开发效率的重要因素之一。然而&#xff0c;有时候我们会发现在使用 Xcode 进行开发时&#xff0c;译速度非常慢&#xff0c;这给我们带来了不少困扰。那么&#xff0c;为什么 Xcode 的…

57.0/初识 PhotoShopCS4(详细版)

目录 57.1 PhotoShop 概要 57.2.1 像素和分辨率 57.2.2 色彩模式 57.2.3 位图和矢量图 57.3 PhotoShop 基本操作 57.3.1 PhotoShop 界面的认识 57.3.2 PhotoShop 基本界面工具 57.3.3 移动选择工具(V) 57.3.4 选框工具(M)​编辑 ​编辑57.3.5 套索工具(L) 57.3…

uniapp中各种状态的按钮

当涉及状态按钮时&#xff0c;UniApp提供了丰富的选择。UniApp中的状态按钮可以是开关按钮、单选按钮、多选按钮等。开发者可以根据具体需求选择使用合适的状态按钮组件。对于状态按钮&#xff0c;UniApp提供了丰富的API和事件&#xff0c;可以轻松实现状态切换、状态监听等功能…

cfa一级考生复习经验分享系列(十二)

背景&#xff1a;就职于央企金融机构&#xff0c;本科金融背景&#xff0c;一直在传统金融行业工作。工作比较忙&#xff0c;用了45天准备考试&#xff0c;几乎每天在6小时以上。 写在前面的话 先讲一下&#xff0c;整体一级考下来&#xff0c;我觉得知识点多&#xff0c;偏基础…

Android apk安装包反编译——apktool工具

apk 文件结构 首先是 apk&#xff0c;即安卓程序的安装包。Apk 是一种类似于 Symbian Sis 或 Sisx 的文件格式。通过将 APK 文件直接传到 Android 模拟器或 Android 手机中执行即可安装。 而 apk 文件实际上就是一个 MIME 为 ZIP 的压缩包&#xff0c;只不过后缀名进行了更改。…