📜  Angular 2-依赖注入

📅  最后修改于: 2020-10-28 05:09:41             🧑  作者: Mango


依赖注入是在运行时添加组件功能的能力。让我们看一个示例以及实现依赖注入的步骤。

步骤1-创建一个具有可注入装饰器的单独类。可注入装饰器允许此类的功能被注入并在任何Angular JS模块中使用。

@Injectable() 
   export class classname {  
}

步骤2-接下来,在您的appComponent模块或要使用该服务的模块中,您需要在@Component装饰器中将其定义为提供程序。

@Component ({  
   providers : [classname] 
})

让我们看一个有关如何实现此目的的示例。

步骤1-为名为app.service.ts的服务创建一个ts文件。

Ts文件

步骤2-将以下代码放在上面创建的文件中。

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

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

关于上述程序,需要注意以下几点。

  • 可注射装饰器是从角度/核心模块导入的。

  • 我们正在创建一个名为appService的类,该类使用Injectable装饰器进行装饰。

  • 我们正在创建一个名为getApp的简单函数,该函数返回一个名为“ Hello world”的简单字符串。

步骤3-在app.component.ts文件中,放置以下代码。

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

import { 
   appService 
} from './app.service';  

@Component({ 
   selector: 'my-app', 
   template: '
{{value}}
', providers: [appService] }) export class AppComponent { value: string = ""; constructor(private _appService: appService) { } ngOnInit(): void { this.value = this._appService.getApp(); } }

关于上述程序,需要注意以下几点。

  • 首先,我们将appService模块导入appComponent模块中。

  • 然后,我们在该模块中将服务注册为提供者。

  • 在构造函数中,我们定义一个名为_appService的类型为appService的变量,以便可以在appComponent模块中的任何位置调用它。

  • 例如,在ngOnInit生命周期挂钩中,我们调用了服务的getApp函数,并将输出分配给AppComponent类的value属性。

保存所有代码更改并刷新浏览器,您将获得以下输出。

你好,世界