![](https://img-blog.csdnimg.cn/20191202181646190.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
angular4-6开发
落花别有意 流水似无情
一个学无之境的程序员
展开
-
angular4+ng-zerro后台管理系统搭建
电商后台管理系统系统界面搭建搭建一个项目首先需要的环境,之后根据所需要的页面创建组件,再结合一个页面框架快速的搭建一个项目答题页面框架一、开发环境1.安装node.js去官网下载安装包,地址:https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi安装好之后测试是否安装成功node --version2.安装angular-...原创 2019-04-17 16:53:18 · 1429 阅读 · 0 评论 -
Angular6中左右两个option进行单选和多选项的转移
其中htm代码如下: <form action="" > <div class="roleCheckbox"> <span>角色:</span> <label for="checkBox"><input type="checkbox" class="checkAll" (...原创 2019-06-24 22:00:09 · 479 阅读 · 3 评论 -
angular6中进行登录的用户信息进行缓存localStorage本地存储
想要在Angular6项目中进行登陆的账户信息缓存,我们需要在登录组件中把用户信息保存到本地通过localStorage,然后直接在另外一个组件中进行调用即可,代码如下:login.component.ts this.userID = this.loginData.data.userId; this.loginplay = this.loginData.data.userName; ...原创 2019-06-24 21:41:37 · 2599 阅读 · 0 评论 -
angular6表单提交和双向数据绑定
angular6的表单数据提交是通过ngForm进行提交的,通过ngModel进行数据的双向绑定,具体代码如下:html代码:<form action="" #myForm = "ngForm" (ngSubmit)="onSubmit(myForm.value)"> <div class="input-component"> <...原创 2019-06-24 21:28:41 · 1432 阅读 · 2 评论 -
Angular6项目upload上传图片功能实现
根据angular6的特性,我们选择符合其本身的框架ng-zorro,这是一款angular的框架,详情请了解ng-zorro官网。上传图片功能是根据ng-zorro的upload插件进行修改参数值,从而符合我们的需要的功能,具体实现如下:找到Upload的插件地址,根据angular特性,进行引入此模块,但是在此之前首先保证引入了追个ng-zorro框架,方法如下1、、首先在app....原创 2019-06-24 21:15:22 · 8153 阅读 · 4 评论 -
Angular6部署项目到服务器,第一次打开页面慢
Angular6项目打包命令ng build,这种打包的压缩包大小一般都会很大的,我推荐使用ng build --prod --aot,这种打包的方法可以大大压缩压缩包的大小,大概可以压缩60%,但是一般会出现一些语法上的报错,比如一个变量在html中声明,但是没有在ts文件中赋值,那么就会出现报错,说语法错误,这种打包的方法就是非常的严谨,对语法上的要求更细节。这样打包之后的文件部署到服务器...原创 2019-06-25 22:24:47 · 938 阅读 · 0 评论 -
angular6项目中来实现在一个组件中切换不同的子组件
一、今天要在angular6项目中来实现在一个组件中切换不同的子组件 首先也捋顺项目界面,有一个父组件页面,如现在有一个父组件页面menu.component.html,这是父组件,通过点击按钮或者出发事件进行切换子组件,,如果想要在父组件menu.component.html中切换组组件页面,首先要引入子组件,通过<router-outlet></router-...原创 2019-05-16 15:56:04 · 2341 阅读 · 0 评论 -
angular6增加登录界面
一、首先建立一个登录页面login然后把初始加载页面app.component.html内容改成<router-outlet></router-outlet>,意思是用子路由进行加载页面,通过设置路由地址来进行默认加载和跳转,要在app-routing.module.ts里面配置路由.//默认跳转路由{ path: '', redirectTo:...原创 2019-05-16 15:34:41 · 3779 阅读 · 0 评论 -
angular4使用ngModel时候报错:ERROR Error: If ngModel is used within a form tag, either the name.....
angular4中使用[(ngModel)]="date"绑定表单数据的时候报错:ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModel...原创 2019-04-24 14:37:58 · 623 阅读 · 0 评论 -
angular4中组件之间页面切换的数据传递,通过路由传递数据
例如在表格中有一个详情按钮,跳转到另外一个页面,首先需要在所在页面和跳转页面引入路由组件和跳转界面路由组件selectMsg(productID:number,productName:any,productCome:any){// 跳转页面return this.router.navigate(['product-element',{"productID":productI...原创 2019-04-17 17:50:29 · 1323 阅读 · 0 评论 -
angular4中表格第一列全选和反选checkbox多选框
首先要在table中tr的th的第一列和tr的td第一列进行checkbox创建html代码然后再根据事件checkAll的变化进行对checkbox的选中和取消,ts代码如下//全选反选checkAll(ev: any) {this.productData.forEach((x:any) => x.isChecked = ev.target.checked)...原创 2019-04-17 17:20:15 · 759 阅读 · 0 评论 -
angular6中使用树形插件
效果图如下:1、在app.model.ts文件中引入ng-zorro框架插件,代码如下import { NgZorroAntdModule, NZ_I18N, en_US, zh_CN} from 'ng-zorro-antd';2、在需要使用树形插件的组件中进行引入树形插件:import { NzFormatEmitEvent,NzTreeNode,NzTreeCompo...原创 2019-06-24 22:12:46 · 4074 阅读 · 0 评论