Angular 2教程

Angular 2 - Dependency Injection

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

步骤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"; 
   } 
}

关于上述计划，需要注意以下几点.

Injectable装饰器是从angular/core模块导入的.
我们正在创建一个使用Injectable装饰器修饰的appService类.
我们正在创建一个名为getApp的简单函数，它返回一个名为"Hello world"的简单字符串.

第3步 : 在app.component.ts文件中放置以下代码.

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

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

@Component({ 
   selector: 'my-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService]  
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { } 
   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   }   
}

关于上述计划，需要注意以下几点.