在 Angular 中，装饰器在定义和管理应用程序内部依赖关系方面扮演着至关重要的角色。我们经常会在代码中接触到 INLINECODE689752b5 和 INLINECODE8b86ef4a 这两个常用的装饰器。虽然它们都与依赖注入有关，但它们的用途各不相同，并且应用在 Angular 应用程序的不同元素上。
目录
- 什么是 @Injectable 装饰器？
- 什么是 @Inject 装饰器？
- @Injectable 和 @Inject 装饰器的区别
- 总结
什么是 @Injectable 装饰器？
@Injectable 是 Angular 中的一个装饰器，用于标记一个类为“可注入的”，从而允许它作为一个依赖被提供并注入到其他的 Angular 组件、服务或模块中。
语法：
@Injectable({
providedIn: ‘root‘,
})
export class ServiceClass {
constructor() {}
}
@Injectable 装饰器的特性
- 单例模式：创建一个服务的单一实例，以便在整个应用程序中共享。
- 可重用性：服务的设计旨在封装特定的功能，这使得集成和重用变得非常简单。
- 懒加载：通过仅在需要时加载服务来优化性能，从而减少初始加载时间。
创建 Angular 项目的步骤
步骤 1： 使用以下命令创建一个新的 Angular 项目
ng new demo-decorators
步骤 2： 创建一个新的服务
ng generate service demo
文件夹结构：
依赖项：
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
示例：
JavaScript
CODEBLOCK_38b62d0a
我们创建了一个方法 greetUser(user: string)，它接受用户名作为参数，并返回一个带有用户名的问候消息。
输出结果：
‘@Injectable‘ 装饰器本身不会产生明显的视觉效果变化。相反，它在 Angular 中充当一个标记，意味着这个特定的类可以被分配给代码的其他部分。因此，如果你仅仅使用了 ‘@Injectable‘，你不会看到任何直接的输出。这更像是在告诉 Angular：“嘿，这个类是为了在别处使用而存在的！”
什么是 @Inject 装饰器？
@Inject 是一个装饰器，用于指定要注入到类构造函数或提供者定义中的令牌。当自动解析无法实现时，它为 Angular 的 DI（依赖注入）系统显式指定依赖项，有助于根据指定的令牌来解析依赖关系。
@Inject 装饰器的特性
- 解耦：使依赖项和组件之间的耦合度降低。
- 参数注入：在不依赖 TypeScript 类型推断的情况下，将依赖项注入到构造函数或方法中。
- 意图更清晰：通过指示正在向组件或服务注入哪些依赖项来增强可读性。
语法：
export class MyComponent {
constructor(@Inject(ServiceClass) private myService: ServiceClass) {}
}
现在创建一个新组件：-
ng generate component democomponent
文件夹结构：
!component一个新的组件将在 app 文件夹中创建
示例：
HTML
CODEBLOCK_947e870d
JavaScript
CODEBLOCK_83206a30
- 我们使用构造函数中的
@Inject装饰器将 DemoService 注入到组件中。 - 接下来，我们可以使用来自 DemoService 的 INLINECODE5c6d9fe1 方法，并将生成的问候消息保存在 INLINECODE88632160 变量中。
- 现在，你可以在组件的 HTML 模板中访问并查看这条欢迎消息。
输出结果：
!output输出结果