首页
视频
资源
登录
原
Angular与Layui框架集成使用(优化)
6837
人阅读
2021/1/15 17:52
总访问:
287974
评论:
0
收藏:
0
手机
分类:
Angular
在使用后很多入坑 #### 全局引入所有模块 + Layui的所有模块可以全部一次性加载 > + 所有模块可通过`layui/lay/modules`,这里可以看到Layui的所有模块 ![](https://img.tnblog.net/arcimg/Shangjin123/1f017b26a5cc4034b4fca67fe67ed116.png) + 引入所有模块 ![](https://img.tnblog.net/arcimg/Shangjin123/3e794135ed80498fb28b5c0736e3b839.png) #### 使用layui + 在组件里只需要layui全局变量即可,因为所有的模块可以通过layui.出来 `component.ts`: ![](https://img.tnblog.net/arcimg/Shangjin123/3130b2a14a7449dba7f81fa88315a48b.png) + 在使用时只需要通过layui.出来即可 `component.ts`: ```typescript private renderlayui():void{ //弹窗 layui.layer("我弹出来了"); //数据表格 layui.table.render({....}); //表单 .... } ``` #### 使用jQuery > + 在Angular使用jQuery。可通过`npm install --save jquery`来安装,但是如果是使用Layui的话就不需要额外的安装,layui已经自带jQuery模块,在全局引入模块的时候就可以引入了 在使用的时候可以像普通的使用jQuery一样使用 `component.ts`: ```typescript private renderlayui():void{ //id选择器 layui.$("#idselect").html(); } ``` #### 弹窗里弹出表单 > + 如果你是通过一个`layer.open({type:1,content:'自定义html内容'});`方式,在弹窗里放置表单的话,需要在弹窗结束后记得render一下form,要不然表达会无法使用;这个官网也有说明 `component.ts`: ```typescript /**点击按钮弹窗显示表单 */ public OpenLayerShowForm(): void { layui.layer.open({ type: 1, area: ['800px', '500px'], content: layui.$("#layerForm").html() }); layui.form.render(); } ``` #### 加载问题 > 可能是腊鱼i加载速度的原因,导致在初始化的时候好多组件会慢一步,需要settimeout一下,要不然会出现无法渲染的现象,这个问题得进一步看看 `component.ts`: ```typescript ngOnInit(): void { setTimeout(() => { layui.form.render(); }, 1000); } ```
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
是伍尚金哇_v
不帅~~但是很暖心.....
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
22篇
数据库
4篇
权限
2篇
前端移动端
2篇
接口相关
2篇
Redis
1篇
微信开发
1篇
ionic
11篇
Angular
9篇
前端
6篇
我的随笔
4篇
安卓开发
1篇
开发工具
3篇
GitHub
2篇
PHP
1篇
更多
硬件
1篇
工作笔记
3篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术