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

最新推荐文章于 2024-02-20 21:16:32 发布
最新推荐文章于 2024-02-20 21:16:32 发布
阅读量3.4k 收藏 1
点赞数
分类专栏： # angular # ng-alain
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ligaoming_123/article/details/80323109
版权

一、创建公共组件

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

    

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

    

        

二、创建公共方法类

    1、采用服务的方式注入

    

    2、在模块中引入该服务

            

 

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

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

    

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

    

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

    

 

 

pg_li
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ng-alain表单使用方式详解
08-27
ng-alain表单构建方式可以使用shf-item组件来简化表单的构建过程，例如： ``` @Component({ template: ` <form nz-form (ngSubmit)="onSubmit()" shf-wrap> <shf-item label="App Key"> [(ngModel)]="model.name...
angular创建项目、模块、组件、服务命令
前端小白的逆袭
12-23 2991
1、创建项目命令 ng new 项目名 2、创建模块命令 ng g module 模块名 3、创建组件命令 ng g component 组件名 4、创建服务命令 ng g service 5、启动服务 ng serve --open
ng 服务
weixin_30487201的博客
06-06 426
服务的本质是单例对象，封装一些方法和属性的。 单例模式：在实例化变量的时候，如果该变量已经存在，直接返回该变量；如果不存在，就创建一个新的变量再返回 ng自带的服务有很多，常用：$location $window $http $scope $rootScope $interval $timeout.. 服务的使用方式：直接在创建ng对象时候，将服务注入进来，ng的注入器会实现服务的实例化，从...
Nginx服务
q1y2y3的博客
06-02 3020
Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，单台物理服务器理论上可支持30000~50000个并发请求，在互联网项目中广泛应用。
ngnix网站服务详解
最新发布
MCB134的博客
02-20 1024
①Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器，而且支持热部署，几乎可以做到 7 * 24 小时不间断运行，即使运行几个月也不需要重新启动，还能在不间断服务的情况下对软件版本进行热更新②Nginx的主要使用场景： 虚拟主机，反向代理，缓存，http③可以跨平台，配置简单，内存消耗少，10个nginx才占用150M内存。
nginx 配置文件及构建 web 虚拟主机
kele_baba
06-05 198
nginx 配置文件及构建 web 虚拟主机一.编译安装Nginx服务1.关闭防火墙将nginx所需软件包到/opt目录下2.安装依赖包3.创建运行用户、组4.编译安装Nginx5.检查、启动、重启、停止 nginx服务6.添加 Nginx 系统服务二.认识Nginx服务的主配置文件 nginx.conf1.全局配置2.I/O 事件配置3.HTTP 配置4.日志格式设定三.访问状态统计配置1.先使用命令/usr/local/nginx/sbin/nginx -V 查看已安装的 Nginx 是否包含 HTTP
angular基于ng-alain定义自己的select组件示例
08-27
Angular基于Ng-Alain定义自己的Select组件示例 Angular是一款流行的前端框架，Ng-Alain是基于Angular开发的一款企业级框架，提供了许多实用的组件和工具。在实际开发中，Select组件是最常用的组件之一，本文将介绍...
ng-alain-vscode:适用于ng-alain的Visual Studio代码插件
05-27
注意：从11版本开始，扩展语言将遵循VSCode的显示语言，并且无需安装其他版本的ng-alain-vscode扩展，因此将不再维护。 特征 支持类智能 支持类名称悬停介绍 提取i18n密钥 常见的Angular模板 用法 键入nas-的开头将...
详解ng-alain动态表单SF表单项设置必填和正则校验
01-21
动态表单的基本使用：https://ng-alain.com/form/getting-started/zh 基于基本示例，增加手机号必填与正则校验的例子： @Component({ selector: 'app-home', template: ` ]=schema ui]=ui formSubmit)=submit($...
ng-alain的sf如何自定义部件的流程
10-15
在开发基于Angular的项目时，ng-alain是一个非常流行的企业级后台管理模板，它提供了丰富的功能和组件。本文将深入探讨ng-alain中sf（Simple Form）如何自定义部件，帮助开发者更好地满足特定需求。 一、自定义部件...
ABP标准模板，前端ng-alain，还有标准代码模板（可以根据git源自行学习）
03-12
感谢abp作者开源，本项目标准ABP模板，前端为ng-alain,还附带代码生成模板，大家拿去学习吧，赚点积分。
nginx服务的概念和用法
X_Promise的博客
06-15 726
1、Nginx是什么，做了什么事情 Nginx（“engine x”）是一个高性能的HTTP和反向代理服务器，特点是占有内存少，并发能力强，事实上Nginx的并发能力确实在同类型的网页服务器中表现较好，Nginx专为性能优化而开发，性能是其最重要的考量，实现上非常注重效率，能经受高负载的考验，有报告表明能支持高达50000个并发连接数。 2、反向代理 （1）、正向代理：在客户端（浏览器）配置代理服务器，通过代理服务器进行访问互联网访问。 （2）、反向代理：我们只需要将请求发送到反向代理服务器，由反向代理服务
基于qiankun搭建ng-alain15微前端项目入门实践
mjnmjn000的博客
02-22 410
基于qiankun搭建ng-alain15微前端项目入门实践
ng-alain 下拉框select设置多选mode: ‘multiple‘时的问题
a307907593的博客
03-10 577
ng-alain 下拉框select设置多选mode: 'multiple'时的问题 levelRels: { type: 'string', title: '上级外键关系', ui: { widget: 'select', mode: 'multiple' }, default: [] }, 字段初始化时一定要注意设置为数组，不然会报错。 一定要设置默认值： default:
[Angular] 使用 ng-alain
BlackParade的博客
08-24 3598
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
ng自定义服务的几种方式
前端开发技术
07-06 1225
ng的服务本质上也是一个对象，所以也挺好理解，用法也简单，需要时直接注入即可用，ng称为依赖注入，讲得那么高大上，其实就跟JS函数传参是一样的，完全可以这样去理解，下面直接看代码： clikcMe clikcMe   //创建ng模块    var app=angular.module("myModule",['ng']); //下面就两种自定义的方式，两种方式用法差不多
基于ng-alain构建后台项目中的问题（二）
songjinb123的博客
08-31 974
今天测试的同事说，我写的在IE浏览器中有问题，我已经开放了ployfill.ts中的IE限制，而且在我本地IE测了是没问题的，但是放到服务器上再用IE打开就有问题。。。单击左侧的菜单，右侧的内容显示是空白的 后来发现可能是因为，angular被ng-alain包裹所导致的，所以试了下把右侧中最上面的那一行关闭菜单的去掉。。。就可以了...
Angular 入门教程系列：37：使用ng-alain快速开发
热门推荐
知行合一 止于至善
08-08 1万+
ng-alain在ng-zorro-antd上再封一程，可以更快加速开发速度，目前在github上已经超过1800个star。这篇文章来简单看一下如何使用。 创建应用框架 因为alain缺省使用使用less作为样式设定，在创建骨架时需要指定style为less方式。使用ng new alaindemo –skip-install –style less进行创建。 下载依赖 可以使用ya...
基于ng-alain定义自己的select组件
weixin_34129145的博客
12-12 641
1、首先是my-select2.component.html页面,这里是在ng-alain的select基础上根据业务需求添加新的功能;代码如下：<nz-select #select style="width:100%;" [(ngModel)]="selectedOption" [nzPlaceHolder]="myPlaceHolder" nzAllowClear [nzShowSear...
如何使用ng-alain框架，和服务器进行交互，给个例子
06-13
好的，下面是一个使用 ng-alain 框架和服务器进行交互的示例： 1. 在你的 Angular 项目中安装 ng-alain 框架： ``` ng add ng-alain ``` 2. 创建一个服务来进行服务器交互。在你的项目中创建一个名为 `example.service.ts` 的文件，并使用以下代码： ``` import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root', }) export class ExampleService { private apiUrl = 'http://example.com/api'; constructor(private http: HttpClient) {} public getExampleData() { return this.http.get(`${this.apiUrl}/example`); } public postExampleData(data: any) { return this.http.post(`${this.apiUrl}/example`, data); } } ``` 3. 在你的组件中使用服务来与服务器进行交互。在你的项目中创建一个名为 `example.component.ts` 的文件，并使用以下代码： ``` import { Component, OnInit } from '@angular/core'; import { ExampleService } from './example.service'; @Component({ selector: 'app-example', templateUrl: './example.component.html', styleUrls: ['./example.component.less'], }) export class ExampleComponent implements OnInit { public exampleData: any; constructor(private exampleService: ExampleService) {} ngOnInit() { this.exampleService.getExampleData().subscribe((data) => { this.exampleData = data; }); } public onSubmit(data: any) { this.exampleService.postExampleData(data).subscribe(() => { console.log('Data submitted successfully'); }); } } ``` 在这个例子中，我们创建了一个名为 `ExampleService` 的服务来与服务器进行交互。在组件中，我们注入了这个服务，并在 `ngOnInit` 中调用了 `getExampleData()` 方法来获取例子数据，并将其存储在 `exampleData` 变量中。我们还创建了一个名为 `onSubmit` 的方法来提交数据到服务器，它使用了 `postExampleData()` 方法来提交数据，并在提交成功后打印一条消息。 希望这个例子可以帮助你了解如何使用 ng-alain 框架与服务器进行交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值