A brief discussion on how to maintain separation of concerns using Angular instructions?

How to maintain separation of concerns using Angular directives? The following article will introduce to you how to maintain separation of concerns through Angular instructions. I hope it will be helpful to you!

Suppose we have a date picker component in our application. Every time the user changes the date, an event is sent to the analytics provider. So far, we have only used it once, so this analysis interface can be placed in the component that uses it: [Related tutorial recommendation: "angular tutorial"]

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,
        });
      });
  }
}

However, now that we have more places to use this analysis interface, we don’t want to write the same code repeatedly. Someone might suggest that this code could be incorporated into a date picker and passed as an input parameter.

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,
    });

    ...
  }
}

Indeed, this can be achieved, but this is not an ideal design. Separation of concerns means that the date picker itself has nothing to do with the analysis interface, and it does not need to know any information about the analysis interface.

In addition, because the date picker is an internal component, we can modify its source code, but what if it is a third-party component? How to solve it?

A better choice here is the Angular directive. Create a directive, obtain a reference to the form through DI, and subscribe to changes in internal values ​​to trigger analysis events. 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
          }
        );
      });
  }
}

It can now be used every time the date picker is used.

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

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion on how to maintain separation of concerns using Angular instructions?. For more information, please follow other related articles on the PHP Chinese website!