這篇文章將為大家詳細(xì)講解有關(guān)如何利用Angular指令保持關(guān)注點(diǎn)分離，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營(yíng)銷(xiāo)的理念，以專(zhuān)業(yè)定制企業(yè)官網(wǎng)，網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)，小程序開(kāi)發(fā)，網(wǎng)頁(yè)設(shè)計(jì)制作，移動(dòng)網(wǎng)站建設(shè)，成都全網(wǎng)營(yíng)銷(xiāo)幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級(jí)專(zhuān)業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對(duì)客戶(hù)都以感恩的心態(tài)奉獻(xiàn)自己的專(zhuān)業(yè)和所長(zhǎng)。

假設(shè)在我們的應(yīng)用程序中有一個(gè)日期選擇器組件。用戶(hù)每次更改日期的時(shí)，都會(huì)給分析提供商發(fā)送一個(gè)事件。到目前位置，我們只使用過(guò)一次，所以這個(gè)分析接口可以放在使用它的組件中：

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

但是，現(xiàn)在我們有更多的地方使用這段分析的接口，我們并不想重復(fù)的編寫(xiě)同樣的代碼。有人可能提出這段代碼可以合并到日期選擇器中并作為輸入?yún)?shù)傳遞。

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

    ...
  }
}

確實(shí)，這樣可以實(shí)現(xiàn)，但是這并不是理想的設(shè)計(jì)。關(guān)注點(diǎn)分離意味著日期選擇器本身是和分析接口沒(méi)有關(guān)系的，它也不需要了解任何分析接口的信息。

此外，因?yàn)槿掌谶x擇器是一個(gè)內(nèi)部的組件，我們可以修改他的源碼，但是如果是第三方的組件？該如何解決？

這里更好的選擇時(shí)Angular指令，創(chuàng)建一個(gè)指令，通過(guò)DI獲取表單的引用，訂閱內(nèi)部值的修改來(lái)觸發(fā)分析事件。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
          }
        );
      });
  }
}

現(xiàn)在可以在每次使用日期選擇器時(shí)使用它了。

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

關(guān)于“如何利用Angular指令保持關(guān)注點(diǎn)分離”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

文章名稱(chēng)：如何利用Angular指令保持關(guān)注點(diǎn)分離
標(biāo)題鏈接：http://chinadenli.net/article48/ppcphp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站建設(shè)、網(wǎng)站收錄、網(wǎng)頁(yè)設(shè)計(jì)公司、域名注冊(cè)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)