Angular指令如何有效实现关注点分离的深层原理是什么？

本文共计1000个文字，预计阅读时间需要4分钟。

Angular指令如何保持关注点的分离？

本篇文章将为大家详细解析通过Angular指令保持关注点分离的方法，希望对大家有所帮助！

假设在我们的应用程序中有一个日期选择器组件。用户每次选择日期时，都会触发一些事件。为了保持关注点的分离，我们可以使用Angular指令来实现。

具体方法如下：

1. 创建一个日期选择器指令（例如：datePickerDirective）。

2.在指令中定义一个输入属性（例如：date），用于接收用户选择的日期。

3.在指令的控制器中定义一个方法（例如：onDateChange），用于处理日期变更事件。

4.在指令的模板中，使用ngModel指令将输入属性与日期选择器组件的值进行双向绑定。

5.在日期选择器组件的值变更时，调用指令控制器中的onDateChange方法。

以下是具体的代码实现：

typescript

import { Directive, Input, OnInit, Output, EventEmitter } from '@angular/core';

@Directive({ selector: '[app-date-picker]'})export class DatePickerDirective implements OnInit { @Input() date: Date; @Output() dateChange=new EventEmitter();

constructor() {}

ngOnInit() {}

onDateChange(newDate: Date) { this.dateChange.emit(newDate); }}

在组件模板中使用该指令：

在组件类中定义onDateChange方法：

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

@Component({ selector: 'app-date-picker', template: ` `})export class DatePickerComponent { selectedDate: Date;

onDateChange(newDate: Date) { // 处理日期变更事件 console.log('Selected date:', newDate); }}

通过以上方法，我们成功地将日期选择器的关注点分离到了指令中，使得组件类更加简洁，易于维护。希望对大家有所帮助！

Angular指令如何保持关注点的分离？本篇文章带大家了解一下通过 Angular 指令保持关注点分离的方法，希望对大家有所帮助！

假设在我们的应用程序中有一个日期选择器组件。用户每次更改日期的时，都会给分析提供商发送一个事件。到目前位置，我们只使用过一次，所以这个分析接口可以放在使用它的组件中：

header-1.ts

import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroyed'; @UntilDestroy() class FooComponent { timespanControl = new FormControl(); ngOnInit() { this.timespanControl.valueChanges .pipe(untilDestroyed(this)) .subscribe(({ preset }) => { this.analyticsService.track('timespan-filter apply', { value: preset, }); }); } }

但是，现在我们有更多的地方使用这段分析的接口，我们并不想重复的编写同样的代码。有人可能提出这段代码可以合并到日期选择器中并作为输入参数传递。

data-picker-1.component.ts

class DatePickerComponent { @Input() analyticsContext: string; constructor(private analyticsService: AnalyticsService) {} apply() { this.analyticsService.track('timespan-filter apply', { context: this.analyticsContext, value: this.preset, }); ... } }

确实，这样可以实现，但是这并不是理想的设计。关注点分离意味着日期选择器本身是和分析接口没有关系的，它也不需要了解任何分析接口的信息。

此外，因为日期选择器是一个内部的组件，我们可以修改他的源码，但是如果是第三方的组件？该如何解决？

这里更好的选择时Angular指令，创建一个指令，通过DI获取表单的引用，订阅内部值的修改来触发分析事件。datePickerAnalytics.directive.ts

@UntilDestroy() @Directive({ selector: '[datePickerAnalytics]', }) export class DatePickerAnalyticsDirective implements OnInit { @Input('datePickerAnalytics') analyticsContext: string; constructor( private dateFormControl: NgControl, private analyticsService: AnalyticsService ) {} ngOnInit() { this.dateFormControl .control.valueChanges.pipe(untilDestroyed(this)) .subscribe(({ preset }) => { this.analyticsService.track( 'timespan-filter apply', { value: preset, context: this.analyticsContext } ); }); } }

现在可以在每次使用日期选择器时使用它了。

<date-picker [formControl]="control" datePickerAnalytics="fooPage"></date-picker>

英文原文地址：netbasal.com/maintaining-separation-of-concerns-through-angular-directives-8362ccdf655b

原文作者：Netanel Basal

更多编程相关知识，请访问：编程视频！！