角度指令与组件

角度（Angular）是一个流行的JavaScript框架，用于构建Web应用程序。在角度中，指令与组件是构建用户界面（UI）的基础。

什么是指令？

指令是一种用于向页面中添加行为的方式，例如更改元素的样式、读取或更新元素中的内容，以及响应用户的操作。指令使用@Directive装饰器进行定义，并通过选择器指定要添加行为的元素。

以下是一个简单的指令示例：

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[highlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

在上述代码中，我们使用@Directive装饰器定义了一个名为HighlightDirective的指令，它将添加黄色背景色来突出显示它所选择的元素。该指令将selector属性设置为highlight，这意味着它可用于HTML元素的属性中：<div highlight>...</div>。

什么是组件？

组件是一种使用指令和模板定义用户界面的方式。组件等效于Web应用程序中的自定义HTML元素。在角度中，每个组件都有自己的视图，可以隔离其内部状态和逻辑。

以下是示例组件的代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: '<h1>Hello {{name}}!</h1>'
})
export class HelloComponent {
  name = 'World';
}

在上述代码中，我们使用@Component装饰器定义一个名为HelloComponent的组件，该组件选择器设置为app-hello。它还有一个模板，其中包含一个标题元素，这将输出“Hello World！”到浏览器。name属性设置为World，我们可以在模板中使用它来动态更改输出。

结论

指令和组件是角度中创建动态用户界面的基本构建块。指令可用于添加行为和样式，而组件则允许您定义应用程序的各个部分。始终确保根据您的应用程序需要进行选择和使用它们。