在Angular中,有三种类型的组件:组件、指令和管道。
组件是Angular中最常用的组件类型。它们是带有HTML、CSS和JavaScript逻辑的可重用的UI元素。以下是组件的代码示例:
@Component({ selector: 'app-example', templateUrl: './example.component.html', styleUrls: ['./example.component.css'] }) export class ExampleComponent { // 逻辑 }
指令用于向现有元素添加行为和功能。它们没有自己的模板,而是修改现有的DOM元素。以下是指令的代码示例:
@Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(private el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } }
管道用于转换数据呈现给用户。它们提供了一个简单的方法来格式化数据。以下是管道的代码示例:
@Pipe({name: 'uppercase'}) export class UppercasePipe implements PipeTransform { transform(value: string): string { return value.toUpperCase(); } }