Analisis mendalam tentang cara arahan Sudut mengekalkan pengasingan kebimbangan?

Bagaimanakah arahan sudut mengekalkan pengasingan kebimbangan? Artikel ini akan menunjukkan kepada anda cara mengekalkan pemisahan kebimbangan melalui arahan Angular saya harap ia akan membantu anda!

Andaikan kami mempunyai komponen pemilih tarikh dalam aplikasi kami. Setiap kali pengguna menukar tarikh, acara dihantar kepada pembekal analitis. Setakat ini, kami hanya menggunakannya sekali, jadi antara muka analisis ini boleh diletakkan dalam komponen yang menggunakannya:

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

Tetapi, kini kami mempunyai lebih banyak tempat untuk menggunakan antara muka analisis ini dan kami tidak mahu menulis kod yang sama berulang kali. Seseorang mungkin mencadangkan bahawa kod ini boleh dimasukkan ke dalam pemilih tarikh dan diluluskan sebagai parameter input. [Cadangan tutorial berkaitan: "tutorial sudut"]

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

    ...
  }
}

Memang, ini berkesan Dilaksanakan, tetapi ini bukan reka bentuk yang ideal. Pengasingan kebimbangan bermakna pemilih tarikh itu sendiri tiada kaitan dengan antara muka analisis dan ia tidak perlu mengetahui sebarang maklumat tentang antara muka analisis.

Selain itu, kerana pemilih tarikh ialah komponen dalaman, kami boleh mengubah suai kod sumbernya, tetapi bagaimana jika ia adalah komponen pihak ketiga? Bagaimana untuk menyelesaikannya?

Pilihan yang lebih baik di sini ialah arahan Sudut Buat arahan, dapatkan rujukan kepada borang melalui DI dan langgan perubahan dalam nilai dalaman untuk mencetuskan peristiwa analisis. 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
          }
        );
      });
  }
}

kini boleh digunakan setiap kali pemilih tarikh digunakan.

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

Alamat asal bahasa Inggeris: https://netbasal.com/maintaining-separation-of-concerns-through-angular-directives-8362ccdf655b

Pengarang asal: Netanel Basal

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Analisis mendalam tentang cara arahan Sudut mengekalkan pengasingan kebimbangan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!