Angular 지시문이 관심사 분리를 유지하는 방법에 대한 심층 분석은 무엇입니까?

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

그러나 이제 이 분석 인터페이스를 사용할 수 있는 장소가 더 많아졌습니다. 동일한 코드를 반복해서 작성하고 싶지 않습니다. 누군가는 이 코드를 날짜 선택기에 통합하여 입력 매개변수로 전달할 수 있다고 제안할 수 있습니다. [관련 튜토리얼 추천: "angular tutorial"]

data-picker-1.comComponent.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>

영어 원문 주소: https://netbasal.com/maintaining-separation-of-concerns-through-angular-directives-8362ccdf655b

원저자: Netanel Basal

더 많은 프로그래밍 관련 지식을 보시려면 방문해주세요. : 프로그래밍 동영상! !

위 내용은 Angular 지시문이 관심사 분리를 유지하는 방법에 대한 심층 분석은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!