您好,登录后才能下订单哦!
这篇文章给大家介绍如何理解Angular中的组件通讯和依赖注入,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
Angular组件间怎么进行通讯?依赖注入是什么?
1.1 向组件内部传递数据
<app-favorite [isFavorite]="true"></app-favorite>
// favorite.component.ts import { Input } from '@angular/core'; export class FavoriteComponent { @Input() isFavorite: boolean = false; }
注意:在属性的外面加
[]
表示绑定动态值,在组件内接收后是布尔类型,不加[]
表示绑定普通值,在组件内接收后是字符串类型。【相关教程推荐:《angular教程》】
1.2 组件向外部传递数据
需求:在子组件中通过点击按钮将数据传递给父组件
<!-- 子组件模板 --> <button (click)="onClick()">click</button>
// 子组件类 import { EventEmitter, Output } from "@angular/core" export class FavoriteComponent { @Output() change = new EventEmitter() onClick() { this.change.emit({ name: "张三" }) } }
<!-- 父组件模板 --> <app-favorite (change)="onChange($event)"></app-favorite>
// 父组件类 export class AppComponent { onChange(event: { name: string }) { console.log(event) } }
2.1 概述
依赖注入 ( Dependency Injection
) 简称DI
,是面向对象编程中的一种设计原则,用来减少代码之间的耦合度
class MailService { constructor(APIKEY) {} } class EmailSender { mailService: MailService constructor() { this.mailService = new MailService("APIKEY1234567890") } sendMail(mail) { this.mailService.sendMail(mail) } } const emailSender = new EmailSender() emailSender.sendMail(mail)
EmailSender
类运行时要使用 MailService
类,EmailSender
类依赖 MailService
类,MailService
类是 EmailSender
类的依赖项。
以上写法的耦合度太高,代码并不健壮。如果 MailService
类改变了参数的传递方式,在 EmailSender
类中的写法也要跟着改变
class EmailSender { mailService: MailService constructor(mailService: MailService) { this.mailService = mailService; } } const mailService = new MailService("APIKEY1234567890") const emailSender = new EmailSender(mailService)
在实例化 EmailSender
类时将它的依赖项通过 constructor
构造函数参数的形式注入到类的内部,这种写法就是依赖注入。
通过依赖注入降了代码之间的耦合度,增加了代码的可维护性。MailService
类中代码的更改再也不会影响 EmailSender
类
2.2 DI
框架
Angular
有自己的 DI
框架,它将实现依赖注入的过程隐藏了,对于开发者来说只需使用很简单的代码就可以使用复杂的依赖注入功能。
在 Angular
的 DI
框架中有四个核心概念:
Dependency
:组件要依赖的实例对象,服务实例对象
Token
:获取服务实例对象的标识
Injector
:注入器,负责创建维护服务类的实例对象并向组件中注入服务实例对象。
Provider
:配置注入器的对象,指定创建服务实例对象的服务类和获取实例对象的标识。
2.2.1 注入器 Injectors
注入器负责创建服务类实例对象,并将服务类实例对象注入到需要的组件中
创建注入器
import { ReflectiveInjector } from "@angular/core" // 服务类 class MailService {} // 创建注入器并传入服务类 const injector = ReflectiveInjector.resolveAndCreate([MailService])
获取注入器中的服务类实例对象
const mailService = injector.get(MailService)
服务实例对象为单例模式,注入器在创建服务实例后会对其进行缓存
const mailService1 = injector.get(MailService) const mailService2 = injector.get(MailService) console.log(mailService1 === mailService2) // true
不同的注入器返回不同的服务实例对象
const injector = ReflectiveInjector.resolveAndCreate([MailService]) const childInjector = injector.resolveAndCreateChild([MailService]) const mailService1 = injector.get(MailService) const mailService2 = childInjector.get(MailService) console.log(mailService1 === mailService2) // false
服务实例的查找类似函数作用域链,当前级别可以找到就使用当前级别,当前级别找不到去父级中查找
const injector = ReflectiveInjector.resolveAndCreate([MailService]) const childInjector = injector.resolveAndCreateChild([]) const mailService1 = injector.get(MailService) const mailService2 = childInjector.get(MailService) console.log(mailService1 === mailService2) // true
2.2.2 提供者 Provider
配置注入器的对象,指定了创建实例对象的服务类和访问服务实例对象的标识
const injector = ReflectiveInjector.resolveAndCreate([ { provide: MailService, useClass: MailService } ])
访问依赖对象的标识也可以是字符串类型
const injector = ReflectiveInjector.resolveAndCreate([ { provide: "mail", useClass: MailService } ]) const mailService = injector.get("mail")
useValue
const injector = ReflectiveInjector.resolveAndCreate([ { provide: "Config", useValue: Object.freeze({ APIKEY: "API1234567890", APISCRET: "500-400-300" }) } ]) const Config = injector.get("Config")
将实例对象和外部的引用建立了松耦合关系,外部通过标识获取实例对象,只要标识保持不变,内部代码怎么变都不会影响到外部
关于如何理解Angular中的组件通讯和依赖注入就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。