Perbincangan ringkas tentang cara mengekalkan pemisahan kebimbangan menggunakan arahan Sudut?

Bagaimana untuk mengekalkan pemisahan kebimbangan menggunakan arahan Sudut? Artikel berikut akan memperkenalkan kepada anda cara mengekalkan pemisahan kebimbangan melalui arahan Sudut 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: [Cadangan tutorial berkaitan: "tutorial sudut"]

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

Namun, kini kami mempunyai lebih banyak tempat untuk menggunakan antara muka analisis ini, 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.

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 boleh dicapai, 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>

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

Atas ialah kandungan terperinci Perbincangan ringkas tentang cara mengekalkan pemisahan kebimbangan menggunakan arahan Sudut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!