注入角度2.它是如何工作的?

时间:2017-08-15 09:58:13

标签: angular dependency-injection

我几天来一直在学习Angular 2。当我在Angular 2中阅读Injectable()概念并尝试在此链接中应用教程的示例代码时:Angular 2 - Dependency Injection,我遇到了问题。

他们说我需要在类的顶部放置注释@Injectable(),以便其他类可以注入,如:

import { 
   Injectable 
} from '@angular/core'; 

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

问题是,当我删除I​​njectable()时,我的应用程序仍能正常运行。 有人可以帮我弄清楚Angular 2中的注射是如何起作用的吗?

2 个答案:

答案 0 :(得分:6)

正如文件中明确指出的那样:

  

碰巧,您可能已从@Injectable()的第一个版本中省略HeroService,因为它没有注入参数。但是你现在必须拥有该服务具有注入依赖项。你需要它,因为Angular需要构造函数参数元数据才能注入Logger

https://angular.io/guide/dependency-injection#why-injectable

简而言之,如果你的注射器有注射器,@Injectable装饰器会解析循环依赖。

<小时/> 的&#34; Angular 2中的注入如何工作?&#34;

这是一个非常广泛的问题,但总结一下Angular注入系统会创建该提供程序对象/函数的实例,并在构造函数中注入时在该组件中使用该实例。

如果您没有提供它在您正在使用的组件中,那么它将转到它的父组件,直到它已经被模块化一直使用,直到找到实例。每个级别都有自己的提供程序实例映射,组件将使用它在向上遍历注入树时找到的第一个实例。

因此,提供者将是一个单例实例,直到它被定义为止。

答案 1 :(得分:0)

编写应用程序时,必须执行3个步骤才能执行注射:
1.创建服务类 2.声明接收组件的依赖关系 3.配置进样(在NgModule中注册带角度的进样。)

该服务将被称为可注射服务,因为它代表组件将通过注射接收的内容。

@Injectable()
export class MyService { 
  getData(): void { 
    console.log('Fetching data');
  }
}

现在你要注入的东西,下一步就是声明当angular创建组件时你想要接收的依赖关系。
在角度中执行此操作的一种方法是通过在组件的构造函数中声明我们想要的注入:

export class MyApp {
  constructor(private myService: MyService) {}
} 

当你在组件构造函数中声明注入时,angular会做一些反射来确定要注入的类。换句话说,angular将看到我们正在构造函数中查找MyService类型的对象,并检查依赖注入系统以进行适当的注入。
使用依赖注入的最后一步是连接我们的组件想要从注入中注入的东西。这意味着,当组件声明其依赖关系时,我们需要告诉angular要注入哪些东西。 我们通过将MyService添加到NgModule的提供者密钥来实现此目的。

@NgModule({
  declarations: [ MyApp ],
  imports: [ BrowserModule ],
  providers: [ MyService ]
})