CN112035280A - 一种基于Angular的管道处理数据方法及工具 - Google Patents

一种基于Angular的管道处理数据方法及工具 Download PDF

Info

Publication number
CN112035280A
CN112035280A CN202010896687.7A CN202010896687A CN112035280A CN 112035280 A CN112035280 A CN 112035280A CN 202010896687 A CN202010896687 A CN 202010896687A CN 112035280 A CN112035280 A CN 112035280A
Authority
CN
China
Prior art keywords
pipeline
data
file
data processing
module
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202010896687.7A
Other languages
English (en)
Other versions
CN112035280B (zh
Inventor
姚一飞
李彦君
胡章丰
孙思清
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Inspur Cloud Information Technology Co Ltd
Original Assignee
Inspur Cloud Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Inspur Cloud Information Technology Co Ltd filed Critical Inspur Cloud Information Technology Co Ltd
Priority to CN202010896687.7A priority Critical patent/CN112035280B/zh
Publication of CN112035280A publication Critical patent/CN112035280A/zh
Application granted granted Critical
Publication of CN112035280B publication Critical patent/CN112035280B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46—Multiprogramming arrangements
    • G06F9/54—Interprogram communication
    • G06F9/544—Buffers; Shared memory; Pipes
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明公开一种基于Angular的管道处理数据方法及工具，涉及数据处理技术领域，本方法及工具的具体实现步骤包括：基于输入数据，确认设定格式的输出数据；根据输入数据及设定格式的输出数据，编写数据处理的逻辑，使输入数据经管道处理后输出设定格式的数据；将每一种数据处理逻辑分别编写在管道ts文件中，多个管道ts文件再存放于当前项目目录下，并且在管道ts文件中以@Pipe({name:'自定义管道名'})的形式声明，通过export提供给html文件使用。本方法及工具实现过程中，仅需要在项目中写好管道对数据的处理方式，并且在html文件中引用即可，提高了页面运行效率，无需使用*ngIf指令，尤其是针对一些输入数据和输出数据种类很多的地方，避免了代码的重复。

Description

一种基于Angular的管道处理数据方法及工具
技术领域
本发明涉及数据处理技术领域，具体的说是一种基于Angular的管道处理数据方法及工具。
背景技术
AngularJS是一款来自Google的前端JavaScript框架，也是SPA(single-page-application,单页应用)框架，体积小，但是功能强大，极大地简化了前端开发的负担，帮助开发者从事WEB开发。Angular其实是AngularJS，在Angular1的时候还是AngularJs，从Angular2已经开始叫Angular，随着版本的不断更新升级，现在已经从Angular2直接跳到了Angular4,再到Angular5,Angular6。Angular1基于JavaScript的框架，主要用于PC端的web开发；Angular2基于TypeScript的框架，对于移动应用，Angular2及以后的版本有更佳的用户体验，越来越快了。
目前，有很多数据的处理都是放在ts文件里或者在html中使用*ngIf指令，这样虽然也能实现但是代码特别冗余而且可读性不高。因此，研发人员提出了一种基于Angular的管道处理数据方法，该方法实施时，仅需要在项目中写好管道对数据的处理方式，并且在html文件中引用即可。
发明内容
本发明针对目前技术发展的需求和不足之处，提供一种基于Angular的管道处理数据方法及工具。
首先，本发明提供一种基于Angular的管道处理数据方法，解决上述技术问题采用的技术方案如下：
一种基于Angular的管道处理数据方法，包括如下步骤：
基于输入数据，确认设定格式的输出数据；
根据输入数据及设定格式的输出数据，编写数据处理的逻辑，使输入数据经管道处理后输出设定格式的数据；
将每一种数据处理逻辑分别编写在管道ts文件中，多个管道ts文件再存放于当前项目目录下，并且在管道ts文件中以@Pipe({name:'自定义管道名'})的形式声明，通过export提供给html文件使用。
可选的，当不同输入数据通过同一数据处理逻辑时，该数据处理逻辑被封装到module.ts文件；
当多个html文件需要使用同一个管道时，import module.ts文件。
可选的，在管道ts文件通过export提供给html文件使用时，如果管道的运行需要传递参数，则通过继承PipeTransform类，并重写PipeTransform类的transform()方法来对传递的参数进行处理。
可选的，在html文件需要引入管道ts文件时，使用操作符“|”+管道名的方式来使数据流入管道并且输出为设定格式的输出数据。
进一步可选的，在html文件需要引入管道ts文件时，还可以添加参数，参数的形式用于控制参数的最终显示格式，此时，在html文件的管道名后面用冒号标明要传的参数即可。
进一步可选的，在html文件需要引入至少两个管道ts文件时，对至少两个管道进行链式处理，即将至少两个管道按要求排列，并在相邻管道之间使用操作符“|”隔开；
至少两个管道进行链式处理后，还可以添加参数，参数的形式用于控制参数的最终显示格式，此时，在最后一个管道名后面用冒号标明要传的参数即可。
其次，本发明提供一种基于Angular的管道处理数据工具，解决上述技术问题采用的技术方案如下：
一种基于Angular的管道处理数据工具，其包括：
接收模块1，用于接收输入数据；
设定模块，用于设定输入数据的输出格式；
管道模块，用于根据输入数据和输出数据的格式编写数据处理逻辑；
ts文件模块，用于保存编写有数据处理逻辑的管道模块，多个ts文件模块再存放于当前项目目录下，并且在ts文件模块中以@Pipe({name:'自定义管道名'})的形式声明，通过export提供给html文件使用。
可选的，当不同输入数据通过同一数据处理逻辑时，该数据处理逻辑被封装到名称为module.ts的ts文件模块；
当多个html文件需要使用同一个管道模块时，import module.ts。
可选的，在ts文件模块通过export提供给html文件使用时，如果管道模块的运行需要传递参数，则通过继承PipeTransform类，并重写PipeTransform类的transform()方法来对传递的参数进行处理。
进一步可选的，在html文件需要引入ts文件模块时，使用操作符“|”+管道名的方式来使数据流入管道模块并且输出为设定格式的输出数据。
本发明的一种基于Angular的管道处理数据方法及工具，与现有技术相比具有的有益效果是：
1)本发明仅需要在项目中写好管道对数据的处理方式，并且在html文件中引用即可，提高了页面的运行效率；本发明还通过链式管道，实现了更多维度的数据处理，大大提高了前端页面显示的效率和可维护性；
2)本发明可以将前端数据的处理变得更加精准，避免出现某个输入对应多个输出或者多个输入对应一个输出的情况；
3)本发明使用管道处理数据，可以把所有的管道存在在项目文件的一个目录下，当以后需求改变了，直接在对应的管道文件里修改输出的数据即可，很方便，不需要再去某个对应的页面html文件里修改数据了；
4)本发明无需使用*ngIf指令，尤其是针对一些输入数据和输出数据种类很多的地方，避免了大段仅仅是*ngIf指令后的判断条件不同的重复代码。
附图说明
附图1是本发明的方法流程图；
附图2是本发明的结构框图。
附图中各标号信息表示：
1、接收模块，2、设定模块，3、管道模块，4、ts文件模块，5、html文件。
具体实施方式
为使本发明的技术方案、解决的技术问题和技术效果更加清楚明白，以下结合具体实施例，对本发明的技术方案进行清楚、完整的描述。
实施例一：
结合附图1，本实施例提出一种基于Angular的管道处理数据方法，包括如下步骤：
基于输入数据，确认设定格式的输出数据；
根据输入数据及设定格式的输出数据，编写数据处理的逻辑，使输入数据经管道处理后输出设定格式的数据；
将每一种数据处理逻辑分别编写在管道ts文件中，多个管道ts文件再存放于当前项目目录下，并且在管道ts文件中以@Pipe({name:'自定义管道名'})的形式声明，通过export提供给html文件使用。
本实施例中，当不同输入数据通过同一数据处理逻辑时，该数据处理逻辑被封装到module.ts文件。此时，当多个html文件需要使用同一个管道时，import module.ts文件。
本实施例中，在管道ts文件通过export提供给html文件使用时，如果管道的运行需要传递参数，则通过继承PipeTransform类，并重写PipeTransform类的transform()方法来对传递的参数进行处理。
本实施例中，在html文件需要引入管道ts文件时，使用操作符“|”+管道名的方式来使数据流入管道并且输出为设定格式的输出数据。
本实施例中，在html文件需要引入管道ts文件时，还可以添加参数，参数的形式用于控制参数的最终显示格式，此时，在html文件的管道名后面用冒号标明要传的参数即可。
本实施例中，在html文件需要引入至少两个管道ts文件时，对至少两个管道进行链式处理，即将至少两个管道按要求排列，并在相邻管道之间使用操作符“|”隔开。至少两个管道进行链式处理后，还可以添加参数，参数的形式用于控制参数的最终显示格式，此时，在最后一个管道名后面用冒号标明要传的参数即可。
实施例二：
结合附图2，本实施例提出一种基于Angular的管道处理数据工具，其包括：
接收模块1，用于接收输入数据；
设定模块2，用于设定输入数据的输出格式；
管道模块3，用于根据输入数据和输出数据的格式编写数据处理逻辑；
ts文件模块4，用于保存编写有数据处理逻辑的管道模块3，多个ts文件模块4再存放于当前项目目录下，并且在ts文件模块4中以@Pipe({name:'自定义管道名'})的形式声明，通过export提供给html文件5使用。
本实施例中，当不同输入数据通过同一数据处理逻辑时，该数据处理逻辑被封装到名称为module.ts的ts文件模块4。此时，当多个html文件5需要使用同一个管道模块3时，import module.ts。
本实施例中，在ts文件模块4通过export提供给html文件5使用时，如果管道模块3的运行需要传递参数，则通过继承PipeTransform类，并重写PipeTransform类的transform()方法来对传递的参数进行处理。
本实施例中，在html文件5需要引入ts文件模块4时，使用操作符“|”+管道名的方式来使数据流入管道模块3并且输出为设定格式的输出数据。
综上可知，采用本发明的一种基于Angular的管道处理数据方法及工具，仅需要在项目中写好管道对数据的处理方式，并且在html文件5中引用即可，提高了页面的运行效率。
以上应用具体个例对本发明的原理及实施方式进行了详细阐述，这些实施例只是用于帮助理解本发明的核心技术内容。基于本发明的上述具体实施例，本技术领域的技术人员在不脱离本发明原理的前提下，对本发明所作出的任何改进和修饰，皆应落入本发明的专利保护范围。

Claims (10)

1.一种基于Angular的管道处理数据方法，其特征在于,包括如下步骤：
基于输入数据，确认设定格式的输出数据；
根据输入数据及设定格式的输出数据，编写数据处理的逻辑，使输入数据经管道处理后输出设定格式的数据；
将每一种数据处理逻辑分别编写在管道ts文件中，多个管道ts文件再存放于当前项目目录下，并且在管道ts文件中以@Pipe({name:'自定义管道名'})的形式声明，通过export提供给html文件使用。
2.根据权利要求1所述的一种基于Angular的管道处理数据方法，其特征在于，当不同输入数据通过同一数据处理逻辑时，该数据处理逻辑被封装到module.ts文件；
当多个html文件需要使用同一个管道时，import module.ts文件。
3.根据权利要求1所述的一种基于Angular的管道处理数据方法，其特征在于，在管道ts文件通过export提供给html文件使用时，如果管道的运行需要传递参数，则通过继承PipeTransform类，并重写PipeTransform类的transform()方法来对传递的参数进行处理。
4.根据权利要求1所述的一种基于Angular的管道处理数据方法，其特征在于，在html文件需要引入管道ts文件时，使用操作符“|”+管道名的方式来使数据流入管道并且输出为设定格式的输出数据。
5.根据权利要求4所述的一种基于Angular的管道处理数据方法，其特征在于，在html文件需要引入管道ts文件时，还可以添加参数，参数的形式用于控制参数的最终显示格式，此时，在html文件的管道名后面用冒号标明要传的参数即可。
6.根据权利要求4所述的一种基于Angular的管道处理数据方法，其特征在于，在html文件需要引入至少两个管道ts文件时，对至少两个管道进行链式处理，即将至少两个管道按要求排列，并在相邻管道之间使用操作符“|”隔开；
至少两个管道进行链式处理后，还可以添加参数，参数的形式用于控制参数的最终显示格式，此时，在最后一个管道名后面用冒号标明要传的参数即可。
7.一种基于Angular的管道处理数据工具，其特征在于，其包括：
接收模块1，用于接收输入数据；
设定模块，用于设定输入数据的输出格式；
管道模块，用于根据输入数据和输出数据的格式编写数据处理逻辑；
ts文件模块，用于保存编写有数据处理逻辑的管道模块，多个ts文件模块再存放于当前项目目录下，并且在ts文件模块中以@Pipe({name:'自定义管道名'})的形式声明，通过export提供给html文件使用。
8.根据权利要求7所述的一种基于Angular的管道处理数据工具，其特征在于，当不同输入数据通过同一数据处理逻辑时，该数据处理逻辑被封装到名称为module.ts的ts文件模块；
当多个html文件需要使用同一个管道模块时，import module.ts。
9.根据权利要求7所述的一种基于Angular的管道处理数据工具，其特征在于，在ts文件模块通过export提供给html文件使用时，如果管道模块的运行需要传递参数，则通过继承PipeTransform类，并重写PipeTransform类的transform()方法来对传递的参数进行处理。
10.根据权利要求9所述的一种基于Angular的管道处理数据工具，其特征在于，在html文件需要引入ts文件模块时，使用操作符“|”+管道名的方式来使数据流入管道模块并且输出为设定格式的输出数据。
CN202010896687.7A 2020-08-31 2020-08-31 一种基于Angular的管道处理数据方法及工具 Active CN112035280B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010896687.7A CN112035280B (zh) 2020-08-31 2020-08-31 一种基于Angular的管道处理数据方法及工具

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010896687.7A CN112035280B (zh) 2020-08-31 2020-08-31 一种基于Angular的管道处理数据方法及工具

Publications (2)

Publication Number Publication Date
CN112035280A true CN112035280A (zh) 2020-12-04
CN112035280B CN112035280B (zh) 2024-05-10

Family

ID=73585945

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010896687.7A Active CN112035280B (zh) 2020-08-31 2020-08-31 一种基于Angular的管道处理数据方法及工具

Country Status (1)

Country Link
CN (1) CN112035280B (zh)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20010037490A1 (en) * 2000-03-17 2001-11-01 Hiang-Swee Chiang Web application generator
CN103136173A (zh) * 2011-11-29 2013-06-05 北京建龙重工集团有限公司 大批量转换word或excel格式表单文档为网页页面的方法
WO2016054605A2 (en) * 2014-10-02 2016-04-07 Reylabs Inc. Systems and methods involving diagnostic monitoring, aggregation, classification, analysis and visual insights

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20010037490A1 (en) * 2000-03-17 2001-11-01 Hiang-Swee Chiang Web application generator
CN103136173A (zh) * 2011-11-29 2013-06-05 北京建龙重工集团有限公司 大批量转换word或excel格式表单文档为网页页面的方法
WO2016054605A2 (en) * 2014-10-02 2016-04-07 Reylabs Inc. Systems and methods involving diagnostic monitoring, aggregation, classification, analysis and visual insights

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
聂常红;: "基于Struts2的数据输入处理的应用研究", 信息技术与信息化, no. 10 *

Also Published As

Publication number Publication date
CN112035280B (zh) 2024-05-10

Similar Documents

Publication Publication Date Title
US20190012575A1 (en) Method, apparatus and system for updating deep learning model
CN109739523B (zh) 应用程序打包方法、装置、存储介质及终端
CN109886399B (zh) 一种张量处理装置及方法
US8209341B2 (en) Configurable transformation macro
CN109977014B (zh) 基于区块链的代码错误识别方法、装置、设备及存储介质
CN110244936B (zh) 用于支持visio流程图自动导入dcs算法组态软件的方法和装置
CN101652746A (zh) 浮点操作的改善以及相关的改善
CN104049953A (zh) 用于合并操作掩码的未经掩码元素的处理器、方法、系统和指令
CN111026439B (zh) 应用程序的兼容方法、装置、设备及计算机存储介质
CN102902576B (zh) 一种渲染网页的方法、服务器和系统
CN101855617A (zh) 使即插即用硬件用于半自动软件迁移的机制
JP6550269B2 (ja) プログラム作成支援装置、制御方法およびプログラム
JP5588820B2 (ja) データ伝送方法および制御システム
CN111460815B (zh) 规则处理方法、装置、介质及电子设备
CN108664247B (zh) 一种页面模板数据交互的方法及装置
CN102929853B (zh) 基于Excel表单关联的DCS项目数据生成系统和方法
CN108269226A (zh) 用于处理稀疏数据的装置和方法
CN110960855A (zh) 一种通信协议代码更新方法、装置、电子设备及存储介质
CN112256670A (zh) 数据迁移方法、终端设备及可读存储介质
CN111240772A (zh) 一种基于区块链的数据处理方法、装置及存储介质
CN112035280A (zh) 一种基于Angular的管道处理数据方法及工具
EP3447690A1 (en) Maxout layer operation apparatus and method
CN104536751A (zh) 网页源码迁移方法和装置
CN101340311B (zh) 显示控制设备、显示控制程序和显示控制方法
CN102880892B (zh) 无掩膜光刻机曝光中实时添加条形码的方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant