Angular
修炼中的小精灵
这个作者很懒,什么都没留下…
展开
-
Angular 如何开发自定义指令
Angular 如何开发自定义指令今天在工作中遇到了 需要拖拽的功能,在网上查了一下说需要自己开发指令 然后就自定义了一个appDrag的属性指令(我的需求是可以自由拖拽图片到任意地点)步骤:在自己想要的文件夹下创建 ng g directive drag 指令中需要引入ElementRef, HostListener import{Directive,ElementRef,...原创 2019-11-20 18:46:23 · 201 阅读 · 0 评论 -
angular 浏览器id的获取和设置
1、{ path: 'detail/:id', component: HeroDetailComponent },<a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/{{hero.id}}">import { ActivatedRoute } from '@angular/router';...原创 2019-11-12 20:41:26 · 492 阅读 · 0 评论 -
angular中的相关缓存内容
1、如何设置并且获取缓存中的数据<button nz-button nzType="primary" (click)="startTest()">开始测试</button>2、html页面进行设置并且获取 //开始测试 startTest() { this.publishScheme.getPublishSchemeById('fcaca26e-16...原创 2019-05-20 11:46:53 · 171 阅读 · 0 评论 -
angular+NG-ZORRO如何实现树的操作(展示、选中传输给后台)
前言:今天做一个树形结构的展示,从后台取来数据进行展示,再从前台选取传给后台的一个操作。应用的技术是angular、NG-ZORRO效果如下图:(两个量表类型) 后台需要提供的字段有tenantId、normalFormIds、scaleIds分别是当前选中的表格中的id、范式的选中id不包括类型也就是一级标题、量表选中的id同理不包括一级类型的idhtml页面...原创 2019-05-07 18:16:10 · 3768 阅读 · 1 评论 -
在使用angular的表单循环多选框name相同出现报错如何解决
使用[(ngModel)],说明是一个表单元素,如果简单的放在form中,可能会报错,必须要有name 属性,在表单中才有意义;或者使用[ngModelOptions]="{standalone: true}属性,从form中独立出来,提交的时候不包含该标签。在form外使用无所谓有没有name属性。<div *ngIf="current == 2"><div st...原创 2019-05-07 18:25:50 · 565 阅读 · 0 评论 -
angular 如何实现radio的功能
<nz-form-label [nzSm]="0" [nzXs]="10" >性别</nz-form-label><!-- <nz-form-control [nzSm]="6" [nzXs]="14"> --><!-- <nz-radio-group [(ngModel)]="radioValue"> -->&l...原创 2019-05-16 15:09:07 · 2148 阅读 · 0 评论 -
angular+NG-ZORRO如何验证
angular+NG-ZORRO如何验证普通验证(required,emil,minlength,maxlength)<nz-form-item><nz-form-label [nzSm]="8" [nzXs]="12" nzRequirednzFor="intervalTime" >屏变化间隔时间</nz-form-label><n...原创 2019-05-16 16:30:52 · 2322 阅读 · 0 评论 -
angular 自学笔记
angular 自学笔记1、安装node.js node –version查看版本2、查看node已安装列表 npm list –depth=0 –global找到npm安装的位置加入环境变量3、安装angular Clinpm install –g @angular/clicnpm i –g angular-cli安装成功后可进行查看 n...原创 2019-05-30 22:41:20 · 233 阅读 · 0 评论 -
angular 自学笔记
angular 自学笔记1、安装node.js node –version查看版本2、查看node已安装列表 npm list –depth=0 –global找到npm安装的位置加入环境变量3、安装angular Clinpm install –g @angular/clicnpm i –g angular-cli安装成功后可进行查看 n...原创 2019-05-30 22:52:36 · 168 阅读 · 0 评论 -
Angular中如何引用自己写的jq文件
前言:公司想用一套代码分别解决cs端和bs端的问卷调查,功能大体相同,所以在约束了字段之后,我们决定用最原始的html和jq来完成这单独的部分功能,bs端用的框架是angular这就需要解决一个问题如何将你自己写的jq的js代码引入angular中并在angualr项目中直接使用。普通情况我们可以直接用require(‘../../../js/文件名’)但是这种情况只能加载一次,并且有时候...原创 2019-07-29 10:27:26 · 251 阅读 · 0 评论 -
angular+NG-ZORRO如何实现table点击获得选中得行id
添加html<!-- 复选框提示的内容数据部分 --><div class="my-md"><nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message"><ng-...原创 2019-08-28 11:08:30 · 3292 阅读 · 0 评论 -
angular如何实现音频展示和方法属性的使用
注释:在公司用angular 自己尝试很多方法使用audio 的音频 在html中能够写属性并且正常播放,但是在ts中调用不到方法和属性。解决办法:ts文件中audio = new Audio("../../../../assets/audios/clock.mp3");this.audio.play();只需这样就可以!...原创 2019-09-06 18:09:00 · 1527 阅读 · 0 评论 -
Angular如何子向父传值
Angular如何子向父传值父亲:Ts:hreo :Hreo(接口)getHeroName(hero){ this.hreo = hreo;}<p *ngFor=”let hero of heroes” (click)=” getHeroName(hero)”></p><app-details [hero]=”hero”&...原创 2019-05-14 23:24:06 · 1051 阅读 · 0 评论 -
angular同时启动两个项目端口号冲突解决
angular同时启动两个项目端口号冲突解决用angular的时候要新创建一个项目,原来项目不想关闭,还需要在启动一个新的项目,然后新创建项目的时候就出现端口被占用的情况,于是只能修改新项目的端口号angular6和以往版本不同,没有angular-cli,很多结构都发生变化了。。路径\node_modules\@angular\cli\lib\config\schema.json...原创 2019-05-09 13:54:10 · 943 阅读 · 0 评论 -
angular 创建服务 请求数据
ng g s services/user在app.module.ts中引入服务import {UserService} from "./services/user.service";providers: [UserService],使用servies需要引入服务 在users.service.tsimport { Http } from '@angular/http' ;在...原创 2019-05-08 22:33:12 · 139 阅读 · 0 评论 -
angular路由的配置
1、创建组件(命令行)ng g c components/spatialLocationMemorySpan2、app.module.ts中进行引入import { RouterModule,Routes } from '@angular/router';import { SpatialLocationMemorySpanComponent } from './compontent...原创 2019-04-23 14:08:07 · 192 阅读 · 0 评论 -
angular如何创建组件和引入组件
1、创建组件(创建一个headers的组件)命令: ng g c headers命令: ng g c /component/headers (带路径的)2、appmodule.ts中直接引用(HeadersComponent)这个名字必须是有Componentimport { HeadersComponent } from './compontents/headers/head...原创 2019-04-23 14:29:16 · 11260 阅读 · 0 评论 -
Angular如何安装bootstrap 和tether
cnpm/npm install bootstrap@4.0.0-alpha.6 tether jquery –save package.json 中可进行查看安装是否成功和版本号 在angular.json中进行配置在(找到路径地址:node_modules/_bootstrap@4.0.0-alpha.6@bootstrap/dist/css)拷贝bootstra.css的路径地址...原创 2019-04-27 23:06:23 · 362 阅读 · 0 评论 -
angular如何引用并且使用路由以及如何获得相关参数
1、app.module.ts中引入路由 (注意引入两个组件之间必须要有空格,否则会报错)import { RouterModule, Routes } from "@angular/router";//设置路由const appRoutes:Routes = [ {path:"",component:HomeComponent}, {path:"login",compon...原创 2019-04-27 23:06:55 · 460 阅读 · 0 评论 -
angular如何实现form表单的提交
1)、创建html (主要的标签是input添加双向绑定 [(ngModel)]="intervalTime" name="intervalTime"绑定必须有name属性值对应名称)参考网址:http://www.cnblogs.com/xxx91hx/p/7923237.html2)提交表达数据①定义form表单提交事件 (ngSubmit)="saveSetting(表单提交值...原创 2019-04-23 18:58:13 · 4995 阅读 · 0 评论 -
angular关于select的内容
1、ng如何绑定到selct框,如何获得option的内容发生改变的时候绑定事件<nz-select name="optionCount" #optionCount="ngModel"[(ngModel)]="selectedOption.optionCount" nzAllowClear[nzPlaceHolder]="l('OptionCount')" style="widt...原创 2019-04-28 15:41:11 · 301 阅读 · 0 评论 -
Git
1、创建分支 在原有基础分支上创建分支2、点击克隆复制链接地址直接在git上面clonegit clone 克隆地址3、查看仓库的分支git branch -a4、创建本地分支切换自己的分支git checkout -b v1 origin/v15、这样就可以直接访问了相关bug解决1)、在远程仓库创建了项目,但是git中查看分支并未显示可...原创 2019-07-16 18:08:17 · 75 阅读 · 0 评论 -
在angular+NG_ZORRO项目中如何 引用别人建好的组件菜单
原因:在项目中同事创建好了一个菜单的组件发给了我,我需要添加并且展示。步骤如下# 前端配置# service-proxy.module 配置1. 首先在前端项目的根目录中的打开 `nswag-> refresh.bat` 批处理文件更新 service-proxies.ts 文件内容2. 再到文件夹路径为`\src\shared\service-proxies\serv...原创 2019-05-05 17:57:04 · 993 阅读 · 0 评论 -
angular如何实现创建功能和修改功能在同一个组件中
angular如何实现创建功能和修改功能在同一个组件中刚刚接触angular,创建功能和修改功能可以公用一个组件。记录如下html:<formnz-form#validateForm="ngForm"(ngSubmit)="submitForm()"nzLayout="horizontal"autocomplete="off"><!-- 模态框头部...原创 2019-05-08 14:05:39 · 390 阅读 · 0 评论 -
在angular中如何操作当前点击的元素
前言:在做功能的时候想通过点击当前的按钮,控制当前的元素样式,我是通过原生的js来控制的想做的想过很简单点击元素的时候让自己的背景变颜色,其他背景都恢复白色html:<div class="add-trclass" id="itemList"><p *ngFor="let item of optionList; let idx = index" (click)...原创 2019-05-08 15:21:06 · 1232 阅读 · 0 评论 -
angular如何安装jquery
angular如何安装jquery准备npm(相信 Angular 项目中,本机肯定有 npm)良好的网络(之所以把网络写到这里,是因为由于npm仓库在国外的原因,有时候因为网络问题会导致安装失败,这时可以将仓库换为淘宝的仓库,具体方法可把npm直接换成cnpm即可)安装jQuery使用以下命令进行安装:# 进入到项目目录# 安装 jQuery 依赖npm ...原创 2019-05-08 16:18:13 · 975 阅读 · 0 评论 -
在angular中安装富文本编辑器
1、cnpm install ngx-quill 2、cnpm install quill3、index.html中引用样式<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet" />4、app.module.ts中import { QuillModule } from ...原创 2019-04-25 22:49:19 · 1211 阅读 · 0 评论