• 技术文章 >web前端 >js教程

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

    青灯夜游青灯夜游2021-09-13 10:42:21转载91
    利用Angular指令怎么保持关注点分离?下面本篇文章给大家介绍一下通过Angular指令保持关注点分离的方法,希望对大家有所帮助!

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

    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.component.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中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    上一篇:深入了解Node.js中的四大流,解决“背压”问题 下一篇:如何使用es6的set
    线上培训班

    相关文章推荐

    • 浅谈Angular中如何使用路由?• 深入了解AngularJS中的模块化和依赖注入• 深入了解Angularjs中的视图和指令• 聊聊Angular中的自定义管道• 深入了解Angular中的路由

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网