Angular 中指令与组件之间有什么联系？

Question

组件继承于指令，并扩展了与 UI 视图相关的属性，如 template、styles、animations、encapsulation 等。

指令和组件都是 Angular 的核心概念。组件是带有模板的指令，封装了视图和逻辑，而指令则是对现有 DOM 元素的行为进行扩展或修改。组件可以用来构建应用的用户界面，指令则用于增强或改变 DOM 元素的功能。在层级上，组件通常是更高层的抽象，而指令则可以作为组件内部的小功能模块。

举个例子，假设你有一个显示用户信息的组件：

@Component({
  selector: 'app-user-profile',
  template: `<div>{{ user.name }}</div>`
})
export class UserProfileComponent {
  user = { name: 'Alice' };
}

而如果你想创建一个指令来改变这个组件内用户名字的颜色，可以这样定义：

@Directive({
  selector: '[appTextColor]'
})
export class TextColorDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.color = 'blue';
  }
}

然后在组件的模板中使用这个指令：

<div appTextColor>{{ user.name }}</div>