面试题：Angular中指令与组件的区别基础认知

定义方式区别

指令：
- 通过@Directive装饰器来定义。例如：

import { Directive } from '@angular/core';
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor() {}
}

主要侧重于对DOM元素进行行为增强或修改，不具备自己独立的视图。
组件：
- 通过@Component装饰器来定义。例如：

import { Component } from '@angular/core';
@Component({
  selector: 'app-my - component',
  templateUrl: './my - component.html',
  styleUrls: ['./my - component.css']
})
export class MyComponent {
  constructor() {}
}

不仅包含逻辑，还拥有自己独立的模板（templateUrl或template）和样式（styleUrls或styles），本质上是一个带有视图的指令。

用途区别

指令：
- 用于对现有DOM元素进行操作，改变其行为或外观。例如添加自定义的事件处理逻辑、修改元素的属性等。不创建独立的组件实例，侧重于对元素的局部增强。
组件：
- 用于构建独立、可复用的UI部件。组件之间通过输入（@Input()）和输出（@Output()）属性进行通信，形成清晰的层次结构，更侧重于构建应用的整体结构和功能模块。

适用场景举例

适合使用指令的场景：
- 表单验证：比如创建一个自定义指令用于验证输入框的值是否符合特定格式。例如创建一个appEmailValidator指令，用于检查输入的内容是否为有效的邮箱格式。可以在<input>元素上使用[appEmailValidator]来实时验证输入。
- 元素样式切换：创建一个appHighlightOnHover指令，当鼠标悬停在元素上时，改变元素的背景颜色等样式。可以应用在任何HTML元素上，如<div [appHighlightOnHover]>。
适合使用组件的场景：
- 导航栏：创建一个NavigationComponent组件，包含导航链接、菜单等UI元素。可以在不同的页面或布局中复用该组件，方便统一管理导航栏的样式和行为。
- 商品卡片：在电商应用中，创建一个ProductCardComponent组件，展示商品的图片、名称、价格等信息。每个商品都可以用这个组件实例化展示，组件之间通过输入属性来传递不同商品的数据。

面试题：Angular中指令与组件的区别基础认知

知识考点

面试题答案

定义方式区别

用途区别

适用场景举例