ng-alain封装公共模块、组件、服务

最新推荐文章于 2024-03-28 15:48:49 发布
最新推荐文章于 2024-03-28 15:48:49 发布
阅读量3.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： # angular # ng-alain
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ligaoming_123/article/details/80323109
本文介绍如何封装可复用的公共组件与服务，包括组件创建、方法类定义及使用Subject观察者模式进行状态监听的方法。适用于希望提高代码复用率和模块间通信效率的开发者。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、创建公共组件

    1、在shared\json-schema\widgets目录下封装自己的公共模块和组件

    

    2、在各级模块中导入自己的公共模块--》

    

        

二、创建公共方法类

    1、采用服务的方式注入

    

    2、在模块中引入该服务

            

 

三、创建公共服务且使用Subject观察者模式定义进行监听

    1、创建服务类，定义观察者交流方法

    

    2、在事件中触发观察者预留的方法

    

    3、需要感知变化的模块，注册服务，获知变化

    

 

 

angular项目基于ng-alain和ng-zorro等框架实现开发公共组件并且打包上传成npm包
qq_41844127的博客
02-04 719
angular项目基于ng-alain和ng-zorro等框架实现开发公共组件并且打包上传成npm包 前言: 公司开发的项目都是angular框架配合ng-alain,ng-zorro等组件一起使用, 我们自己开发了一些公共组件,这些组件时长需要修改bug,扩展功能什么的,而多个项目都在用的时候就有很多个版本需要维护,非常不利于扩展,所以我们打算将这些公共组件开发成npm包上传,使用的项目直接像使用其他框架包一样,这样就只有一个地方需要维护了. 1. 开发公共组件的项目模板https://downl.
Ng Alain分页控件的使用
helloworld的专栏
11-29 3331
在【Ng Alain】官方示例源码中，关于pagination分页控件的代码如下： <ng-template #pagination> <nz-pagination [nzTotal]="50" [nzPageSize]="5" (nzPageIndexChange)="getData()"&gt
ABP标准模板，前端ng-alain，还有标准代码模板（可以根据git源自行学习）
03-12
感谢abp作者开源，本项目标准ABP模板，前端为ng-alain,还附带代码生成模板，大家拿去学习吧，赚点积分。
基于ng-alain开发的addFilter组件
pgLi
05-10 902
1、效果 2、开发过程 1、高级查询是有几个基础模块组成 input、select、时间、IP输入框等等 首先简单封装下这些基础组件，然后根据类型来进行绘制不同的查询项。 2、基础组件提供输入后或者选中后的查询值，给高级查询。并留一个focus处理方法 import { Component, ElementRef, Input, ViewChild, ...
ng-alain
大强博客
05-28 5686
ng-alain NG-ALAIN 一个基于 Antd 中后台前端解决方案，提供更多通用性业务模块，让开发者更加专注于业务。 English| 简体中文 快速入门 # 确保使用的是最新版本 Angular cli ng new demo --style less cd demo ng add ng-alain ng s -o # 或 HMR 模式 npm ru...
关于在ng-alain项目中快速新建项目
小钻风的博客
03-14 541
以下所有语法只需要cd到项目下就可以了 1、建立模块，如同routes.module.ts/routes-routing.module.ts语法如下： ng g ng-alain:module abc 表示在routes下面建立了一个名为abc的模块，最后routes下会形成一个文件夹，里面有两个文件（abc.module.ts和abc-routing.module.ts） 2、若是想在abc文...
Ng-Alain中的st表格组件实现导出界面不展示的列
secretbase12138的博客
07-06 1376
一般需求：st数据（所有列/部分列）导出Excel st组件提供了export()函数方便我们直接将表格的数据导出为Excel文档，在STColumn中也有参数 exported : boolean 来控制是否允许导出，这样就能实现界面上有展示的全导出，或者是控制表格中的某些列不导出，其他的导出的效果。下为代码示例： export(newData?: STData[] | true, opt?: STExportOptions) //在HTML中调用export() export(){ this.h
Angular项目开发模板：ng-alain与ng-zorro组件实践
ng-alain和ng-zorro是两个专门为Angular打造的UI框架库，它们分别基于Ant Design和Zorro UI设计规范，为Angular应用提供了丰富的UI组件和模块化开发能力。 ng-alain是一个成熟的基于Angular和Ant Design的前端解决...
aurora-template：提升abp和ng-alain的易用性
标题“aurora-template：基于abp和ng-alain模板，使其更易于使用”中涉及的关键技术点包括ABP框架、NG-ALAIN模板框架以及前端样式预处理器Less。以下将对这些知识点进行详细阐述： ### ABP框架 ABP（ASP.NET ...
Angular中使用ng-zorro图标库部分图标不能正常显示问题
10-17
总之，处理ng-zorro图标库的显示问题主要是确保正确导入和注册图标，而定制组件样式则需要熟悉Angular的组件封装和CSS作用域规则。通过理解这些原理和技巧，你可以更好地利用ng-zorro构建美观、功能完善的Angular...
高效构建动态表单：nz-schema-form与ng-zorro-antd的融合
- ng-alain提供了一套完整的开箱即用的功能模块和组件，简化了企业级应用的开发过程。 #### delon - delon是另一个基于Angular和ng-zorro-antd的组件库，它提供了与ng-zorro-antd类似的UI组件。 - delon通常用于...
ng-alain-7.3.2.zip
06-03
NG-ALAIN 是一个企业级中后台前端/设计解决方案脚手架，我们秉承 Ant Design 的设计价值观，目标也非常简单，希望在Angular上面开发企业后台更简单、更快速。随着『设计者』的不断反馈，将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建
ngx-ueditor：百度UEditor的Angular
02-01
ngx-ueditor 百度UEditor（ ）的 演示版 特性 懒加载ueditor.all.js文件。 支持ueditor事件监听与删除 支持语言切换 支持ueditor实例对象直接访问。 支持二次开发。 使用 1，安装 npm install ngx-ueditor --save 把UEditorModule模块导入到你项目中。 import { BrowserModule } from '@angular/platform-browser' ; import { FormsModule } from '@angular/forms' ; import { UEditorModule } from 'ngx-ueditor' ; @ NgModule ( { imports : [ BrowserModule , FormsModule , UEditorModule . forRoot ( { js : [ `./assets/ueditor/ueditor.config.js` , `./asse
ng-alain: st 简化表格
ziqi688的博客
03-17 128
https://github.com/ng-alain/delon/blob/master/packages/abc/st/index.zh-CN.md st 并不是在创造另一个表格组件，而是在 nz-table 基础上以可配置形式渲染表格，在中后台里这种方式可以满足绝大多数场景，但又可以更易地管理表格渲染动作。 data 支持三种不同格式数据源，整体分为：URL和静态数据两类；但可以透过参数的...
[Angular] 使用 ng-alain
BlackParade的博客
08-24 3780
Angular - 使用 ng-alain ng-alain，一个阿里的angular脚手架。基于他们自己的ng-zorro，进行再次封装。 在快速开发的时候，用下ng-alain的st、sf来构建还是不错的。但是涉及到一些复杂的表单、页面时，还是使用ng-zorro比较好。 官网：https://ng-alain.com/docs/getting-started/zh 新建 新建空项目 ng new my-project --style less --routing cd my-project ng ad
angular创建项目、模块、组件、服务命令
前端小白的逆袭
12-23 3213
1、创建项目命令 ng new 项目名 2、创建模块命令 ng g module 模块名 3、创建组件命令 ng g component 组件名 4、创建服务命令 ng g service 5、启动服务 ng serve --open
ng-alain+d3.js开发类表格
pgLi
05-29 865
1、安装使用     1）安装d3      npm install --save d3     2）安装@types/d3     npm install --save @types/d3     3）安装d3-dsv   npm install --save @types/d3-dsv 2、tip插件无法使用     d3-tip和tooltip均无法使用     解决办法：...
如何开发一个好用的公共组件
小陈的博客
02-14 1411
清晰的类型定义不仅能降低组件使用门槛，也能使组件减少大部分js错误（例如类型错误，取值为空错误等）。icon?/** * Shape of Button * * @default default // ✅ 类型注释默认值 */shape?size?: SizeType;disabled?: boolean;loading?: number };prefixCls?: string;className?: string;ghost?: boolean;danger?: boolean;block?
【软件架构】分布式架构公共组件简介
最新发布
weixin_46453070的博客
03-28 1707
使用服务编排工具（如Kubernetes、Docker Swarm）可以实现服务的自动部署、健康检查、自动恢复、自动扩缩容等功能，极大地提高了运维效率和系统的可靠性。由于分布式系统的复杂性，这些组件需要仔细管理，以满足性能、可靠性和安全性要求。通过深入理解和合理应用这些公共组件和概念，可以在构建分布式架构时，更好地解决分布式系统所特有的挑战，比如服务协调、数据一致性、系统可靠性和扩展性等问题。在管理分布式架构的公共组件时，遵循一系列最佳实践和规则是至关重要的，以确保系统的健壮性、可维护性和安全性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值