Angular依赖注入的一个例子和注入原理单步调试

时间:2022-07-25
本文章向大家介绍Angular依赖注入的一个例子和注入原理单步调试，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

定义一个抽象服务类：

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的实现代码：

此处生成服务实现类的实例：

随机文章
Javascript知识点必读
最近更新