Angular依赖注入的一个例子和注入原理单步调试
2023-09-14 09:04:03 时间
定义一个抽象服务类:
export abstract class GreetingService {
abstract greet(name: string): string;
}
定义一个具体类实现该抽象类:
import { Injectable } from '@angular/core';
import { GreetingService } from './greeting.service';
@Injectable({ providedIn: 'root'})
export class EnglishGreetingService extends GreetingService {
greet(name: string): string {
return 'Hello ' + name;
}
constructor(){
super();
console.log('English class created!');
}
}
使用注解@Injectable标注这个类可以被注入到其他Component使用。
在构造函数里进行参数注入:
依赖注入原理的调试:
使用app Component的factory创建Component实例:
我们通过Angular Injectable注解修饰的服务实现类,已经成功地被解析并出现在了Angular框架实现代码里,通过token变量存储:
在Angular框架方法getLView返回的lView变量里,能看到App Component template的实现代码:
此处生成服务实现类的实例:
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关文章
- [Angular] ViewChild 'read' option
- [Angular] Router outlet events
- [Angular 2] Directive intro and exportAs
- [Angular 8 Unit Testing] Angular 8 Unit Testing -- service
- [Angular] Pipes as providers
- [Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2
- Angular 依赖注入的一个常见错误 NullInjectorError, No provider for XXX
- Angular forRoot 方法的使用场合介绍
- Angular jasmine单元测试框架TestBed.inject的执行原理
- Angular 依赖注入的学习笔记
- Angular 依赖注入框架里 useExisting 和 useClass 的使用场景
- [Angular 依赖注入详谈] Angular Module Providers几种类型的实现源代码具体位置
- Angular 通过依赖注入机制注入一个对象的例子,什么是 ElementInjector
- Angular依赖注入官方文档的学习笔记
- Angular里遇到的一个依赖注入问题以及解决办法
- 理论+案例,带你掌握Angular依赖注入模式的应用