Angular 类三元

Angular 是一个开发 Web 应用的框架，它提供了三个常用的类即 “组件、指令和管道”，这种类的结构被称为“类三元”。

组件

组件是 Angular 应用程序的构建块，每个组件都有自己的 HTML 模板和样式，可以接受输入和输出事件。组件可以嵌套在其他组件中，从而创建复杂的用户界面。

创建一个组件需要使用 @Component 装饰器，示例代码如下：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My App';
}

其中，selector 属性用于指定组件使用的标签名称，templateUrl 属性用于指定组件的 HTML 模板文件路径，styleUrls 属性用于指定组件的 CSS 样式文件路径。

指令

指令是一种 HTML 元素上的注释或属性，用于扩展 HTML 元素的行为。Angular 提供了三种类型的指令，包括组件指令、结构型指令和属性型指令。

创建一个指令需要使用 @Directive 装饰器，示例代码如下：

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

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

其中，selector 属性用于指定指令使用的 HTML 属性名称，constructor 方法用于执行指令的功能。

管道

管道用于将数据进行转换，并在 HTML 中进行格式化。Angular 提供了多种类型的管道，如文本格式化、日期格式化、货币格式化等。

创建一个管道需要使用 @Pipe 装饰器，示例代码如下：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

其中，name 属性用于指定管道的名称，transform 方法用于对传入的数据进行转换。

以上就是 Angular 类三元的介绍，通过组合使用这三种类型的类，可以快速开发出高质量的 Web 应用程序。