当前位置: 首页 > news >正文

angular注入方法providers

在Angular中有很多方式可以将服务类注册到注入器中:

@Injectable 元数据中的providedIn属性
@NgModule 元数据中的 providers属性
@Component 元数据中的 providers属性
创建一个文件名叫名 hero.service.ts叫 hero 的服务
 hero.service.ts

import { Injectable } from '@angular/core';@Injectable({providedIn: 'root',
})
export class HeroService {constructor() { }// 新增加setName方法setName(name:string):string{return `姓名:${name}`;}}


1.@Injectable 元数据中的providedIn属性

providedIn: 'root' 告诉 Angular在根注入器中注册这个服务,这也是使用CLI生成服务时默认的方式.
这种方式注册,不需要再@NgModule装饰器中写providers,而且在代码编译打包时,可以执行摇树优化,会移除所有没在应用中使用过的服务。推荐使用此种方式注册服务

使用providedIn的话,后面直接在项目中使用了。

使用:heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service'@Component({selector: 'app-heroes',templateUrl: './heroes.component.html',styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {constructor(private heroService:HeroService) { }ngOnInit() {this.heroService.setName('张三');}
}


2.@NgModule 元数据中的 providers属性

改写 hero.service.ts里面的@Injectable,如下

import { Injectable } from '@angular/core';@Injectable() // 删掉了 {providedIn: 'root'}
export class HeroService {...}


 xx.module.ts , 例如app.module.ts

...@NgModule({providers: [HeroService,// { provide: HeroService, useValue: HeroService }],
})...


然后就可以在使用拉,使用方法,同1 heroes.component.ts文件

3.@Component 元数据中的 providers属性

 hero.service.ts里面的@Injectable,删掉 {providedIn: 'root'},同2 hero.service.ts文件

改写heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service'@Component({selector: 'app-heroes',templateUrl: './heroes.component.html',styleUrls: ['./heroes.component.css'],providers: [HeroService] // 新增 providers: [HeroService]
})
export class HeroesComponent implements OnInit {constructor(private heroService:HeroService) { }ngOnInit() {this.heroService.setName('张三');}
}


 

三种用法总结:

@Injectable 元数据中的providedIn属性  

//service.ts
@Injectable({providedIn:'root'})//component.ts
constructor(private heroService:HeroService) { }


@NgModule 元数据中的 providers属性

// service.ts
@Injectable() //module.ts
@NgModule({providers: [HeroService ]
})


@Component 元数据中的 providers属性

// service.ts
@Injectable() // component.ts
@Component({...selector: 'app-heroes',providers: [ HeroService ]
})


原文链接:https://blog.csdn.net/sllailcp/article/details/102548144

相关文章:

angular注入方法providers

在Angular中有很多方式可以将服务类注册到注入器中: Injectable 元数据中的providedIn属性 NgModule 元数据中的 providers属性 Component 元数据中的 providers属性 创建一个文件名叫名 hero.service.ts叫 hero 的服务 hero.service.ts import { Injectable } from angular…...

Git提交规范指南

在开发过程中,Git每次提交代码,都需要写Commit message(提交说明),规范的Commit message有很多好处: 方便快速浏览查找,回溯之前的工作内容可以直接从commit 生成Change log(发布时用于说明版本…...

QT之UDP通信

QT之UDP通信 UDP不分客户端口服务器,只需要使用一个类QUdpSocket QT += core gui networkgreaterThan(QT_MAJOR_VERSION, 4): QT += widgetsTARGET = udp TEMPLATE = app# The following define makes your compiler emit warnings if you use # any feature of Qt …...

一、进入sql环境,以及sql的查询、新建、删除、使用

1、进入sql环境 》》》mysql -u root -p 》》》输入密码 2、sql语言的分类 3、注意事项: 4、基础操作: (1)查询所有数据库: show databases; 运行结果: (2)创建一个新的数据库&…...

向日葵如何截图

场景 向日葵远程时,有时需要截图,但是客户电脑上没有qq、微信等软件提供快捷截图。 怎么办呢? 解决方案 其实向日葵肯定支持这些功能的。 设置 | 热键设置 | 勾选 远控其他设备时,可输入热键进行以下操作。 如果: altq 切换…...

固定资产折旧报表

SELECT * FROM SYS_ORGANIZATION -- OID、OCODE、ONAME、OATTRIBUT、FPC_USE_UNITNAME -- IS_DELETE 0 STATUS 1 SELECT * FROM FA_PROPERTY_CARD -- FPC_MANAGE_UNIT、FPC_ZJLY、FPC_ZJLYNAME、FPC_RESOURCE、FPC_MON_ZJE、FPC_SUMZJ、FPC_J…...

ubuntu18 下更改 mysql 数据目录

一、修改步骤 更改 MySQL 的数据目录需要注意以下几个步骤: 停止 MySQL 服务 在 Ubuntu 中,你可以使用以下命令停止 MySQL 服务: sudo systemctl stop mysql 复制现有数据 假设你的新的数据目录是 /new/dir/mysql,你应该使用 rsy…...

Arduino看门狗定时器WDT

Arduino - 看门狗定时器(WDT:Watch Dog Timer) 参考 看门狗定时器(WDT:Watch Dog Timer)实际上是一个计数器。 一般给看门狗一个大数,程序开始运行后看门狗开始倒计数。 如果程序运行正常&…...

大数据岗位秋招面试八股文总结(不定时更新)

HIVE面试题 内部表和外部表的区别 未被external修饰的是内部表,被external修饰的是外部表; 内部表数据由Hive自身管理,外部表由HDFS管理; 删除内部表会直接删除元数据及存储数据,删除外部表,仅仅会删除…...

MATLAB高分辨率图片

把背景调黑,把曲线调黄,把grid调白,调调字体字号的操作 close all a0:0.1:10; noise2*rand(1,length(a)); bsin(a)sin(3*a)noise;plot(a,b,y,linewidth,2); ylim([-3 4]) %y轴范围 set(gca,xgrid,on,ygrid,on,gridlinestyle,-,Grid…...

Spring Clould 消息队列 - RabbitMQ

视频地址:微服务(SpringCloudRabbitMQDockerRedis搜索分布式) 初识MQ-同步通讯的优缺点(P61,P62) 同步和异步通讯 微服务间通讯有同步和异步两种方式: 同步通讯:就像打电话&…...

【SpringBoot】中的ApplicationRunner接口 和 CommandLineRunner接口

1. ApplicationRunner接口 用法: 类型: 接口 方法: 只定义了一个run方法 使用场景: springBoot项目启动时,若想在启动之后直接执行某一段代码,就可以用 ApplicationRunner这个接口,并实现接口…...

微信小程序前后端开发快速入门(完结篇)

这篇是微信小程序前后端快速入门完结篇了,今天利用之前学习过的所有知识做一个新的项目「群登记助手v1.0」小程序。 整体技术架构:小程序原生前端小程序云开发。 经历了前面教程的学习,大家有了一定的基础,所以本次分享重心主要是…...

【Linux】进程间通信之消息队列

文章目录 消息队列的概念消息队列的出队特点消息队列函数接口获取消息队列向消息队列发送消息接收消息操作消息队列的接口 代码演示ipcs命令 消息队列的概念 消息队列提供进程间数据块传输的方法,传输的每一个数据块都认为是有类型的,不同的数据块是有优…...

一次Linux中的木马病毒解决经历(6379端口---newinit.sh)

病毒入侵解决方案 情景 最近几天一直CPU100%,也没有注意看到了以为正常的服务调用,直到腾讯给发了邮件警告说我的服务器正在入侵其他服务器的6379端口,我就是正常的使用不可能去入侵别人的系统的,这是违法的. 排查 既然入侵6379端口,就怀疑是通过我的Redis服务进入的我的系统…...

ProtoBuf

文章目录 1.认识 ProtoBuf2. 安装ProtoBuf3. 快速上手 ProtoBuf4. proto3 语法5. probuf 实战6. 总结 1.认识 ProtoBuf 在认识 啥是 ProtoBuf 之前我们先来 回顾一下 (或 了解 一下 啥是 序列化) 序列化概念回顾 : 图一 : 回顾 序列化 ,下面…...

AJ-Captcha行为验证在vue中的使用

项目场景: 提示:这里简述项目相关背景: 项目场景:由原先的验证码校验升级为行为验证校验 使用方法 提示:参考文档: 参考文档:vue使用AJ-Captcha文档 gitee地址:AJ-Captcha &…...

Layui列表复选框根据条件禁用

// 禁用客服回访id有值的复选框res.data.forEach(function (item, i) {if (item.feedbackEmpId) {let index res.data[i][LAY_TABLE_INDEX];$(".layui-table tr[data-index"index"] input[typecheckbox]").prop(disabled,true);$(".layui-table tr[d…...

K8S核心组件etcd详解(下)

1 k8s如何使用etcd 在k8s中所有对象的manifest都需要保存到某个地方,这样他们的manifest在api server重启和失败的时候才不会丢失。 只有api server能访问etcd,其它组件只能间接访问etcd的好处是 增强乐观锁系统及验证系统的健壮性 方便后续存储的替换…...

【HarmonyOS】【DevEco Studio】ohpm安装失败该如何解决?

【关键词】 HarmonyOS、DevEco Studio、ohpm安装失败 【问题背景及解决方案】 最近遇到很多DevEco Studio安装ohpm失败的问题,下面给大家介绍几种出现的问题以及解决方案: 1、ohpm not set up,报错截图如下: ​ 解决方案&…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

Python 高效图像帧提取与视频编码:实战指南

Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...