在 Angular 应用程序中，装饰器是非常常见的语法。装饰器提供了一种简洁的方式来添加元数据，并对类和类的属性进行注解。本文将详细介绍 Angular 中常见的装饰器，包括 @Component、@Injectable、@NgModule、@Input、@Output、@ViewChild、@ContentChild 等。
@Component
@Compoent 装饰器用于定义组件，包括组件的 HTML 模板、样式和逻辑。它的语法如下：
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
...
}其中，selector 是组件的选择器，templateUrl 是组件的 HTML 模板，styleUrls 是组件的样式文件。我们也可以使用 template 替代 templateUrl。
@Injectable
@Injectable 装饰器用于定义一个服务，该服务可以被其他组件或服务注入使用。它的语法如下：
@Injectable({
providedIn: 'root'
})
export class SomeService {
...
}其中，providedIn 表示该服务所提供的根级注入器，这里表示该服务可以在整个应用程序中使用。
@NgModule
@NgModule 装饰器用于定义模块。它的语法如下：
-- -------------------- ---- -------
-----------
------------- -
-------------
---
--
-------- -
--------------
-----------------
---
--
---------- -
------------
---
--
---------- --------------
--
------ ----- --------- - -其中，declarations 表示模块中包含的组件、指令和管道；imports 表示模块依赖的其他模块；providers 表示模块中应该注册的服务；bootstrap 表示模块启动时默认启动的组件。
@Input
@Input 装饰器用于定义一个输入属性。它的语法如下：
@Input() name: string;
其中，name 为被定义的输入属性的名称。
@Output
@Output 装饰器用于定义一个输出属性。它的语法如下：
@Output() event = new EventEmitter<string>();
其中，event 为被定义的输出属性的名称，EventEmitter 为 Angular 提供的事件发射器。
@ViewChild
@ViewChild 装饰器用于获取模板中的组件、指令或 DOM 元素。它的语法如下：
@ViewChild(SomeComponent) someComponent: SomeComponent;
其中，SomeComponent 为被获取的组件或指令的类型，someComponent 为获取到的实例对象。
@ContentChild
@ContentChild 装饰器用于获取投影内容中的组件、指令或 DOM 元素。它的语法如下：
@ContentChild(SomeComponent) someComponent: SomeComponent;
其中，SomeComponent 为被获取的组件或指令的类型，someComponent 为获取到的实例对象。
示范代码
下面是一个简单的 Angular 组件示例，其中用到了上述常见的装饰器：
-- -------------------- ---- -------
------ - ---------- ------- ------ ------- ------------- ---------- ------------ - ---- ----------------
------ - ----------- - ---- ------------------
------ - ------------- - ---- --------------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- -------------------- ---------- ------ -
-------- ----- -------
--------- ------------ - --- -----------------------
------------------------- -------------- --------------
---------------------------- ------------ --------------
------------------- ------------ ------------ - -
----------- ---- -
-
------------------- ------- -
--------------------------------
-
-结论
本文简单介绍了 Angular 应用程序中常见的装饰器，包括 @Component、@Injectable、@NgModule、@Input、@Output、@ViewChild、@ContentChild 等。它们的作用和用法对于开发 Angular 应用程序非常关键，熟练掌握它们的用法可以帮助开发者在 Angular 应用程序中更加高效地编写代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3bb82f40ec5a964e49615