您的位置是:网站首页>Javascript编程Javascript编程

浅谈利用Angular指令怎么保持关注点分离?

少儿编程网2021-12-27 16:14:14Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介利用Angular指令怎么保持关注点分离?下面本篇文章给大家介绍一下通过Angular指令保持关注点分离的方法,希望对大家有所帮助!假设在我们的应用程序中有一个日期选择器组件。用户每次更改日期的时,都会给分析提供商发送一个事件。到目前位置,我们只使用过一次,所以这个分析接口可以放在使用它的组件中:【

利用Angular指令怎么保持关注点分离?下面本篇文章给大家介绍一下通过Angular指令保持关注点分离的方法,希望对大家有所帮助!GG4少儿编程网-https://www.pxcodes.com

GG4少儿编程网-https://www.pxcodes.com

假设在我们的应用程序中有一个日期选择器组件。用户每次更改日期的时,都会给分析提供商发送一个事件。到目前位置,我们只使用过一次,所以这个分析接口可以放在使用它的组件中:【相关教程推荐:《angular教程》】GG4少儿编程网-https://www.pxcodes.com

header-1.tsGG4少儿编程网-https://www.pxcodes.com

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

但是,现在我们有更多的地方使用这段分析的接口,我们并不想重复的编写同样的代码。有人可能提出这段代码可以合并到日期选择器中并作为输入参数传递。GG4少儿编程网-https://www.pxcodes.com

data-picker-1.component.tsGG4少儿编程网-https://www.pxcodes.com

class DatePickerComponent {
  @Input() analyticsContext: string;
   
  constructor(private analyticsService: AnalyticsService) {}

  apply() {
    this.analyticsService.track('timespan-filter apply', {
      context: this.analyticsContext,
      value: this.preset,
    });

    ...
  }
}

确实,这样可以实现,但是这并不是理想的设计。关注点分离意味着日期选择器本身是和分析接口没有关系的,它也不需要了解任何分析接口的信息。GG4少儿编程网-https://www.pxcodes.com

此外,因为日期选择器是一个内部的组件,我们可以修改他的源码,但是如果是第三方的组件?该如何解决?GG4少儿编程网-https://www.pxcodes.com

这里更好的选择时Angular指令,创建一个指令,通过DI获取表单的引用,订阅内部值的修改来触发分析事件。datePickerAnalytics.directive.tsGG4少儿编程网-https://www.pxcodes.com

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

现在可以在每次使用日期选择器时使用它了。GG4少儿编程网-https://www.pxcodes.com

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

更多编程相关知识,请访问:编程视频!!

以上就是浅谈利用Angular指令怎么保持关注点分离?的详细内容,更多请关注少儿编程网其它相关文章!GG4少儿编程网-https://www.pxcodes.com

来源:php中文网GG4少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

浅谈利用Angular指令怎么保持关注点分离?

      匿名评论
    • 评论
    人参与,条评论
    浅谈利用Angular指令怎么保持关注点分离?

微信公众号

免费视频教程

先知道