站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

深入浅析Angular指令如何保持关注点的分离?

时间:2021-12-23 [网络编程]作者:fabuyuan 浏览:7 次

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

但是,现在我们有更多的地方使用这段分析的接口,我们并不想重复的编写同样的代码。有人可能提出这段代码可以合并到日期选择器中并作为输入参数传递。【相关教程推荐:《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指令如何保持关注点的分离?的详细内容,更多请关注站长家园其它相关文章!

本文标签:  angula指令保持关注点分离

转载请注明来源:深入浅析Angular指令如何保持关注点的分离?

本文永久链接地址:https://www.adminjie.com/post/6743.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • centos7 终端中文乱码怎么办

      centos7 终端中文乱码怎么办

      centos7终端中文乱码的解决办法:1、查看服务器编码;2、查看终端xshell编码;3、设置“exportLANG="zh_CN.UTF-8"”;4、重启...

    • html5标签head和header有什么区别

      html5标签head和header有什么区别

      区别:1、head标签用于定义文档头部,它是所有头部元素的容器,而header标签用于定义文档的页眉(介绍信息);2、浏览器都支持head标签,而旧版本浏览器均...

    • docker可以装在虚拟机上吗

      docker可以装在虚拟机上吗

      docker可以装在虚拟机上;docker容器运行在虚拟机或者物理机上都可以,无论是虚拟机还是物理机,都是硬件和基础设施的一种交付方式,而docker容器主要就...

    • centos是linux系统吗

      centos是linux系统吗

      centos是linux操作系统的一个版本,centos主要分为两个版本:1、CentOSLinux版,该Linux版每两年发行一次;2、CentOSStr...

    • 搜索引擎对html5友好吗

      搜索引擎对html5友好吗

      搜索引擎对html5友好,搜索引擎蜘蛛能够更加轻易的抓取和索引使用Html5标准网站的内容。html5有利于搜索引擎抓取和收录网站更多的内容,对SEO很友好,可...

  • 买服务器送会员
  • 热门文章
  • 买服务器送会员