Angular 지침을 사용하여 문제 분리를 유지하는 방법에 대한 간략한 설명이 있습니까?

Angular 지시문을 사용하여 문제 분리를 유지하는 방법은 무엇입니까? 다음 글에서는 Angular 지침을 통해 관심사 분리를 유지하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

애플리케이션에 날짜 선택기 구성요소가 있다고 가정해 보겠습니다. 사용자가 날짜를 변경할 때마다 분석 제공자에게 이벤트가 전송됩니다. 지금까지 한 번만 사용했기 때문에 이 분석 인터페이스는 이를 사용하는 컴포넌트에 배치할 수 있습니다: [관련 튜토리얼 권장사항: "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,
        });
      });
  }
}

하지만, 이제 이 분석 인터페이스를 사용할 수 있는 곳이 더 많아졌으며 동일한 코드를 반복적으로 작성하고 싶지 않습니다. 누군가는 이 코드를 날짜 선택기에 통합하여 입력 매개변수로 전달할 수 있다고 제안할 수 있습니다.

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>

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 Angular 지침을 사용하여 문제 분리를 유지하는 방법에 대한 간략한 설명이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!