在 Angular 中，@Directive 和 @Component 都是可重用性和组件化的关键概念。它们都可以用来定义组件，但是它们之间有什么区别呢？在本文中，我们将会讨论这两个 Angular 装饰器的异同，以及如何正确地使用它们。
@Directive
@Directive 是一个装饰器，被用于标注一个类为指令。指令是一种特殊类型的组件，它用来扩展 HTML 元素或者提供行为，比如改变元素的外观或者响应用户的输入事件。指令通常不包含模板（template），而是由它们所控制的元素自身来定义模板。
以下是一个简单的例子，该指令将一个元素背景色设置为红色：
-- -------------------- ---- -------
------ - ---------- ---------- - ---- ----------------
------------
--------- -----------------
--
------ ----- ---------------------- -
------------------- --- ----------- -
-------------------------------------- - ------
-
-在上面的代码中，@Directive 装饰器标注了 RedBackgroundDirective 类，它通过 selector 属性指定了该指令要绑定到哪些元素上。在构造函数中，我们注入了 ElementRef 对象，它表示指令所控制的元素。然后我们就可以通过 nativeElement 属性来直接修改该元素的样式。
@Component
@Component 装饰器被用于标注一个类为组件，它是指令的一种特殊形式。除了拥有指令的所有属性和功能外，组件还会包含一个模板（template），用来定义组件的视图层次结构、样式和逻辑。组件通常会作为一个独立的界面单元，由其他组件或指令嵌入到页面中。
以下是一个简单的例子，该组件用来展示一个名字和年龄：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------
--------- -
-----
------ ---- -------
------- -- --- ------
------
-
--
------ ----- --------------- -
---- - -------
--- - ---
-在上面的代码中，@Component 装饰器标注了 PersonComponent 类，它通过 selector 属性指定了该组件要在 HTML 中使用的标签名。在 template 属性中，我们定义了组件的模板，它使用了 Angular 的模板语法来显示数据。
@Directive v/s @Component
现在我们来看一下 @Directive 和 @Component 的异同。虽然它们都可以用来定义组件，但是它们之间有以下几个区别：
是否有模板
@Directive 是没有模板的，而 @Component 必须要有模板。
是否拥有视图层次结构
@Directive 通常用来扩展 HTML 元素或者提供行为，它不会创建任何自己的视图层次结构；而 @Component 则会定义自己的视图层次结构，它可以包含其他组件或指令。
是否有样式
@Directive 通常是用来修改元素样式或者响应事件等，它很少会定义自己的样式；而 @Component 则可以拥有自己的样式。
是否被其他组件或指令使用
@Directive 通常是被其他组件或指令使用的，它们通常不会直接在 HTML 中使用；而 @Component 则可以直接在 HTML 中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25028