首页 > 其他分享 >关于 Angular 的 hierarchical injector

关于 Angular 的 hierarchical injector

时间:2023-10-28 10:44:05浏览次数:33  
标签:服务 LoggerService 组件 hierarchical injector logger Angular 注入

Angular 的 "dependency injection" 是一种设计模式,它可以帮助我们更有效地组织和共享代码。在 Angular 中,我们可以通过注入服务(一个常见的可注入对象类型)到组件、指令或其他服务中,实现代码的复用和模块化。

Angular 的注入器系统是分层级的,也被称为 "hierarchical injector"。这意味着你可以在不同的层级创建和注入服务,从而决定它们的作用范围和共享行为。

举个例子,假设你有一个 LoggerService 用于记录应用的日志信息。你可以在应用的根模块 AppModule 中提供这个服务:

import { LoggerService } from './logger.service';

@NgModule({
  providers: [ LoggerService ],
  ...
})
export class AppModule { }

这样,LoggerService 就成了一个单例服务,整个应用只会有一个 LoggerService 实例。你可以在任何需要的地方注入这个服务:

import { LoggerService } from './logger.service';

@Component({
  ...
})
export class SomeComponent {
  constructor(private logger: LoggerService) {
    this.logger.log('Hello World!');
  }
}

然而,有时候你可能希望在某个特定的组件及其子组件中使用一个独立的 LoggerService 实例。这时,你就可以在那个组件的元数据中提供 LoggerService

import { LoggerService } from './logger.service';

@Component({
  providers: [ LoggerService ],
  ...
})
export class SomeSpecificComponent {
  constructor(private logger: LoggerService) {
    this.logger.log('Hello Specific World!');
  }
}

在这种情况下,SomeSpecificComponent 及其所有子组件中注入的 LoggerService 都会是这个新的实例,而不是在 AppModule 中提供的单例。

这就是 Angular 的 "hierarchical injector" 的工作原理。每个注入器都有一个父注入器,当你尝试在某个组件中注入服务时,Angular 会首先在该组件的注入器中查找该服务,如果没找到,就会去父注入器中查找,这个过程会一直持续到根注入器。如果在整个过程中都没找到该服务,Angular 就会抛出错误。

标签:服务,LoggerService,组件,hierarchical,injector,logger,Angular,注入
From: https://www.cnblogs.com/sap-jerry/p/17793777.html

相关文章

  • AngularJS: 服务 vs 提供者 vs 工厂
    内容来自DOC[https://q.houxu6.top/?s=AngularJS:服务vs提供者vs工厂](https://q.houxu6.top/?s=AngularJS:服务vs提供者vs工厂)AngularJS中Service、Provider和Factory的区别是什么?从AngularJS邮件列表中我得到了一个很棒的帖子,它解释了服务、工厂和提供者的区......
  • 分享!10个使用Angular CLI的实战应用技巧
    如果您正在使用Angular,就知道AngularCLI有多有用。它简化了创建和管理Angular项目的过程,凭借其直观的命令行界面,它可以轻松处理复杂的任务,如生成组件、服务、管道、指令等。但是您知道如何有效地使用AngularCLI吗?在本文中,我们将分享10个超级棒的实战应用技巧,来帮助您掌握Angula......
  • Angular 12简单安装运行相关
    创建安装Angular12版本:npminstall-g@angular/[email protected]创建工程:ngnewjp-demo1addAngularroting?y...................touse?scss运行cdjp-demo目录下ngserve--open--open运行抛异常ngserve--open无法加载文件C:\ProgramFiles......
  • Angular Routing Primary
    WhyRouting1.通过Url表示应用的状态2.让应用变得可以link,即直接通过url来链接到某个指定的页面3.可用通过用户角色来确定是否可以访问该页面4.*可通过路由来模块化加载应用*ConfiguringRoutesAutocreate:可以通过angular-cli来创建基本的routing相关Ma......
  • 如果我有jQuery背景,是否应该学习AngularJS?
    内容来自DOChttps://q.houxu6.top/?s=如果我有jQuery背景,是否应该学习AngularJS?假设我熟悉在jQuery上开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下必要的范式转变吗?以下是一些问题,可能有助于你回答:我如何以不同的方式架构和设计客户端Web应用程序?最大的区......
  • 浅谈 Angular 引入 Transfer State 机制的动机
    在Angular之中,TransferState是一个用于在服务器端渲染(SSR)中传递状态的机制。它可以解决应用程序的一些重要问题,比如性能问题和用户体验问题。在这篇文章中,我将详细解释TransferState的概念,工作原理以及如何在Angular应用程序中使用它。首先,我们需要了解什么是服务器......
  • 【Dotnet 工具箱】基于 .NET 6 和 Angular 构建项目任务管理平台
    1.Reha时间管理大师Rhea是一个基于C#和.NET6开发的在线任务管理平台,类似于禅道、Jira、Redmine,滴答清单等。支持多视图多维度统一管理任务。多级结构,工作区,空间,文件夹,列表,可以更灵活的进行任务管理。应用支持多主题和主题色切换,灵活搭配,随心所欲。Rhea使用的技术栈......
  • 【Angular】视图封装
    参考:WhatisViewEncapsulationinAngular|ViewEncapsulation作用:控制样式作用域类型:ViewEncapsulation.Emulated(默认值),本组件的样式只会应用到自身,不会应用到自己的子组件中,也不会流出到父组件。ViewEncapsulation.None,本组件的样式向外流出,污染全局,所有组件的样式都会......
  • angular使用from动态设置验证器(clearValidators、setValidators)
    原文链接:https://www.longkui.site/program/frontend/angularfrom/4787/0.背景调试一个angular的form表单,根据条件动态赋予表单的权限验证。主要介绍clearValidators和setValidators的用法。1.代码初始化代码:1234567891011121314151617181920212......
  • An unhandled exception occurred: Could not find the implementation for builder @
    原文链接:https://www.longkui.site/error/angular-cli/4795/调试一个新的angula项目时,报上面的错误。断定基本是版本不匹配导致的。看了看网上的一些信息说是升级一下angular-cli的版本就行了。但是升级后也不好用,后来发现,不是要升级,而是要根据packa.json里面的信息安装指定......