Angular 4 依赖注入教程：Injectable 装饰器详解

Angular 4依赖注入学习教程之Injectable装饰器 Angular 4依赖注入学习教程之Injectable装饰器是Angular 4依赖注入系列教程的第六篇，主要介绍了Angular 4中的Injectable装饰器。Injectable装饰器是Angular 4中的一种装饰器，用于标记类可以被依赖注入系统所识别。 在Angular 4中，依赖注入是通过providers来实现的。Providers是Angular 4中的核心概念之一，用于提供依赖项给组件。 providers可以是值、工厂、类、令牌等多种形式。在本篇教程中，我们将重点介绍 Injectable装饰器的使用。 Injectable装饰器是Angular 4中的一个重要概念，它可以标记类可以被依赖注入系统所识别。Injectable装饰器可以应用于类、属性、方法、参数等多种场景。下面是Injectable装饰器的基本语法： ``` @ Injectable() class MyService { constructor() { } } ``` 在上面的代码中，我们使用了Injectable装饰器来标记MyService类可以被依赖注入系统所识别。 在TypeScript中，类装饰器的声明方式如下： ``` declare type ClassDecorator<TFunction extends Function> = (target: TFunction) => TFunction | void; ``` 类装饰器顾名思义，就是用来装饰类的。它接收一个参数：target:TFunction–被装饰的类。 下面是一个简单的类装饰器的示例： ``` function Greeter(target: Function): void { target.prototype.greet = function(): void { console.log('Hello!'); } } @Greeter class Greeting { constructor() { //内部实现 } } let myGreeting = new Greeting(); myGreeting.greet(); // 输出：Hello! ``` 在上面的代码中，我们定义了一个Greeter类装饰器，它可以将greet方法添加到被装饰的类上。在Greeting类中，我们使用了Greeter装饰器来添加greet方法。 Injectable装饰器可以应用于多种场景，例如标记服务、工厂、值等多种形式的providers。下面是一个使用Injectable装饰器来标记服务的示例： ``` @ Injectable() class MyService { constructor() { } } @ Component({ selector: 'app-my', template: '<p>My Component</p>' }) class MyComponent { constructor(private myService: MyService) { } } ``` 在上面的代码中，我们使用了Injectable装饰器来标记MyService服务。然后，在MyComponent组件中，我们使用了MyService服务。 Injectable装饰器是Angular 4中的一个重要概念，用于标记类可以被依赖注入系统所识别。它可以应用于多种场景，例如标记服务、工厂、值等多种形式的providers。