angular2-11
分享angular的一些基础用法 和 进阶的高级用法,还有一些常用的一些案例
张三疯ts
全栈开发工程师。可独立开发后台管理系统、pc、移动端商城、APP、熟练使用nodejs连接数据库开发接口;主要技术栈react,nodejs,angular,vue,nextjs;微信、支付宝小程序,taro;运维:了解linux。熟练使用nginx;
展开
-
angular如何处理多模块间的路由问题,模块1中如何使用模块2中的组件
文章目录一、需求&问题&版本二、如何处理多模块多路由重点:1.根路由2.login模块的子路由设置3.app-content模块的子路由设置三、如何在模块1的组件中使用模块2中的组件例子1. 模块2中导出组件2.将模块2导入模块13.模块1的组件使用模块2的组件一、需求&问题&版本angular版本:angular 9需求: 1.将项目分成login,app-content,app-component等多模块 2.多模块间的路由如何配置,模块间路由如何跳转原创 2021-04-26 11:40:40 · 1519 阅读 · 0 评论 -
ng-zorro 服务式创建模态框,做可复用表单
经常要在页面中点击某个按钮要起一个模态框,服务式创建模态框可以精简代码。直接看效果html<button nz-button nzType="primary" (click)="creatForm()">服务式创建模态框</button>jsimport { NzModalService } from 'ng-zorro-antd/modal';constructor(private modal: NzModalService) {} creatForm(原创 2020-10-16 14:27:59 · 1491 阅读 · 0 评论 -
ng-zorro-树结构的高级使用
ng-zorro-树结构的高级使用1.环境2.动态加载数据1.环境"@angular/core": "~9.1.12", "ng-zorro-antd": "^9.3.0",import { NzButtonModule } from 'ng-zorro-antd/button';2.动态加载数据需求:1.动态加载三级数据2.第一级,第二级不能选中,第三级可选择效果图:<button nz-button (click)="getdata()">获取数据</butt原创 2020-10-11 00:14:16 · 1125 阅读 · 0 评论 -
angular9中使用ng-zorro树插件怎么获取选中的节点
这里写目录标题一、环境二、安装方法+简单的使用三、遇到的问题1.怎么获取选中的节点一、环境"@angular/cli": "^9.1.3","ng-zorro-antd": "^9.1.0",二、安装方法+简单的使用参考文章:https://ng.ant.design/components/tree/zh简单的使用可以参考ng-zorro-antd的示例三、遇到的问题1.怎么获取选中的节点需求:要获取选中的节点,并传给后台方法1.html重点:设置#treedom<原创 2020-09-23 11:55:28 · 2185 阅读 · 0 评论 -
angular ng-zorro服务式创建模态框的小例子,以及常见坑的解决方法
文章目录一、需求&版本需求版本二、解决方法1.列表页面1.html2.js2.modal组件1.html2.js3.css(演示处理content的padding问题)一、需求&版本需求列表页中使用模态框处理新增/编辑功能,提交表单后刷新列表数据;创建服务式modal,其中是新建/编辑的表单;模态框组件可复用;模态框中的提交按钮使用loadding,防止重复提交关闭modal后,页面根据modal层是点击的取消还是确认来决定是否更新数据-内容区清除padding的留白。原创 2021-04-13 17:56:16 · 1408 阅读 · 0 评论 -
angular-pipe 两分钟上手自定义管道过滤器
文章目录环境&需求需求代码1.pipe2.app.module3.组件中使用环境&需求angular2+需求自定义一个给手机号打星号的管道过滤器。代码1.pipe1.指令创建pipeng g pipe pipes/format-phoneimport { Pipe, PipeTransform } from '@angular/core';// 手机号打星号// 例子: 17605998382 => 176xxxx8382@Pipe({ name原创 2021-04-06 17:41:55 · 189 阅读 · 0 评论 -
angular子组件发生变化后使用EventEmitter主动通知父组件
angular子组件发生变化后使用EventEmitter主动通知父组件环境&版本一、需求&解决方案复杂例子:解决方案1:表单提交成功后调用@input 传过来的父组件的方法。解决方案2:表单提交成功后子组件使用EventEmitter主动通知父组件自己调用方法。二、详细的例子思路:创建parent, child两个组件,child详细代码1.parent2.child三、总结环境&版本angular9一、需求&解决方案后台类的项目中,界面往往十分复杂,需要有复杂的原创 2021-02-02 15:07:05 · 953 阅读 · 0 评论 -
angular9 中使用jsonp实现跨域
angular中使用jsonp一、环境二、需求三、实现1.引入HttpClientJsonpModule2.页面中使用3.效果图一、环境angular9二、需求项目中调用百度的地图api,使用地点输入提示的功能地点输入提示文档连接:http://lbsyun.baidu.com/index.php?title=webapi/place-suggestion-api三、实现1.引入HttpClientJsonpModuleapp.module.ts中引入import { HttpClien原创 2021-01-29 13:58:24 · 261 阅读 · 0 评论 -
angular form检测表单数据变化
需求检测到表单数据变化时做出相应的变化,比如检测某个输入框或选择框数据变化,调用函数计算复杂的信息完整度例子:1.html<form nz-form [formGroup]="validateForm"> <nz-form-item> <nz-form-label [nzSpan]="7" nzRequired>姓名</nz-form-label> <nz-form-control [nzSpan]="12原创 2021-01-27 11:39:13 · 1761 阅读 · 0 评论 -
angular检测ie浏览器,并给用户提示
这里写目录标题需求技术方案第一步:检测是否是ie浏览器第二部:js检测ie额外知识mac中用safari测试ie需求angular不支持ie,需要给用户提示并引导使用谷歌浏览器。技术方案先上图,图能看明白逻辑的就不用往下看了,对您有帮助的请点个赞哈。此法使用于vue,react, angualar 等不支持ie浏览器的前端框架。我用的是angular9。第一步:检测是否是ie浏览器js检测ie的代码网上一大堆,但是这个检测代码放哪里合适呢?放到angular编译之后的代码中。结果:原创 2020-12-31 11:45:48 · 893 阅读 · 0 评论 -
手机访问本地开发的angular9项目
这里写自定义目录标题一、环境 & 版本二、使用方法1. 同一局域网2.启动angular项目3.重点需求:本地开发移动端项目时,有时候需要真机实时测试,这时候要是手机能访问本地开发的angular项目就好了,也可以发给小伙伴一块测试,经过几天的摸索,终于实现了,现在发给小伙伴们。一、环境 & 版本电脑:mac版本:angular9二、使用方法1. 同一局域网首先,手机和电脑必须在同一局域网,简单就是电脑和手机需要连接同一个wifi注:电脑用网线貌似不行哈,需要连接wifi原创 2020-11-05 10:56:05 · 412 阅读 · 0 评论 -
angular9中引入ng-zorro
坑:按官网的步骤不一定安装成功哈一、环境"@angular/cli": "^9.1.3","ng-zorro-antd": "^9.1.0",二、正确的安装姿势1. 安装ng zorro组件npm install ng-zorro-antd --save2、导入模块app.module.tsimport { NgZorroAntdModule } from 'ng-zorro-antd';imports: [ BrowserModule, NgZorroAntd.原创 2020-09-25 09:42:40 · 1173 阅读 · 3 评论