Angular指令保持关注点的分离怎么做，方法是什么-群英

上一篇：Node中EventEmitter模块能做什么，如何使用下一篇：module-alias的原理及应用是什么，常见问题有哪些

这篇文章主要介绍了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,
        });
      });
  }
}

但是，现在我们有更多的地方使用这段分析的接口，我们并不想重复的编写同样的代码。有人可能提出这段代码可以合并到日期选择器中并作为输入参数传递。【相关教程推荐：《angular教程》】

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>

英文原文地址：https://netbasal.com/maintaining-separation-of-concerns-through-angular-directives-8362ccdf655b

原文作者：Netanel Basal

感谢各位的阅读，以上就是“Angular指令保持关注点的分离怎么做，方法是什么”的内容了，经过本文的学习后，相信大家对Angular指令保持关注点的分离怎么做，方法是什么都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！

标签： angula指令

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：Node中EventEmitter模块能做什么，如何使用下一篇：module-alias的原理及应用是什么，常见问题有哪些