angular
maozuai~zi
这个作者很懒,什么都没留下…
展开
-
angular 引入第三方js jsencrypt.min.js
angular引入第三方js原创 2023-01-03 16:03:45 · 876 阅读 · 1 评论 -
【angular学习】自定义实现双向绑定
双向绑定转载 2022-06-17 17:50:08 · 704 阅读 · 0 评论 -
【angular学习】 @ViewChild @ViewChildren Renderer2 模板在组件类中的使用
@ViewChild 获取的是单个模板元素,类型是ElementRef@ViewChild 获取组件在最下面有介绍在ngOninit()中打印@ViewChild或@ViewChildren,有时能打印出来,有时候打印不出来,所以操作dom的时候在ngAfterViewInit()方法里@ViewChildren 获取的是多个模板元素,类型是QueryList.........原创 2022-06-16 17:32:16 · 417 阅读 · 0 评论 -
uni-app vue angular 全局取消console.log
main.js配置//不显示console.logif (uni.getSystemInfoSync().platform !== "devtools") { console.log = () => {}}原创 2022-03-24 09:32:03 · 2098 阅读 · 0 评论 -
angular 打包及发布 http-server搭建服务器
angular 打包原创 2022-06-10 17:18:33 · 997 阅读 · 0 评论 -
【angular路由】路由懒加载写法
angular 路由懒加载原创 2022-06-10 11:29:11 · 955 阅读 · 1 评论 -
angular 仅当 “module” 选项设置为 “esnext” 或 “system”,并且 “target” 选项设置为 “es2017” 或更高版本时,才允许使用顶级 “await” 表达式
angular 仅当 “module” 选项设置为 “esnext” 或 “system”,并且 “target” 选项设置为 “es2017” 或更高版本时,才允许使用顶级 “await” 表达式原创 2022-06-02 09:47:00 · 2350 阅读 · 0 评论 -
angular 合并路由查询参数
https://blog.csdn.net/cukw6666/article/details/108080654保留查询参数goUsers() { this.router.navigate(['/users'], { queryParamsHandling: 'preserve' });合并查询参数goUsers() { this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandlin原创 2022-05-31 10:00:08 · 163 阅读 · 0 评论 -
angular 手机真机调试方法
原创 2022-05-26 16:35:58 · 295 阅读 · 0 评论 -
angular 实现鼠标经过图片切换效果,默认图标鼠标经过图标在同一个字段里
需求描述默认图片、鼠标经过图片在一个字段里html文件<div class="zc-header-nav"> <div> <div class="block" *ngFor="let item of data" [ngStyle]="{'width':myWidth}"> <div (mouseover)="getImg1($event,item.icon)" (mouseout)="getImg2($event,item.icon)原创 2022-05-26 15:09:36 · 546 阅读 · 0 评论 -
linux安装字体
https://www.cnblogs.com/huangyanqi/p/10609587.html原创 2022-05-25 10:47:42 · 93 阅读 · 0 评论 -
ng-zorro-antd求一个时间段的数据 2022-01-10 00:00:00到2022-03-10-23:59:59
ng-zorro-antd组件html<nz-range-picker ](ngModelChange)="onChange($event)" (onChange)="onChange($event)"></nz-range-picker>ts文件//引入DatePipeimport { DatePipe} from '@angular/common'@Component({providers: [DatePipe]})startTimeendTim.原创 2022-03-12 15:26:33 · 481 阅读 · 0 评论 -
angular 有条件的执行click事件
实现效果当list.action不为空时执行click事件<tr *ngFor="let data of list" (click)="(list.action) && openMessage(data)"> <td>....</td></tr>ts文件openMessage(data) { window.open(list.action) }原创 2022-02-22 15:44:21 · 1277 阅读 · 0 评论 -
query接口使用,查询
实现的功能描述1、通过手机号获取用户职级,当用户职级为空时,全员可见2、当内容发布时职级为空时,全员可见场景描述1、从接口获取的我的职级,我的当前职级为VP2、通过查询接口获取和我职级一致的数据3、当发布的 数据权限为全员时,无论我的职级是什么都可以看到注意点一:在模型里设置全员的值时,可以将把全部的职级加进去这样获取的数据如下,无论谁是什么职级都可以看到这条数据注意点二://筛选信息 filter(value, ziji, pageIndex, pageSize) {原创 2021-12-28 16:35:17 · 553 阅读 · 0 评论 -
页面显示的时候先显示暂无数据然后再显示数据
ts文件://给hasdata赋值为true,在页面加载的时候就不会先显示暂无数据;hasdata: boolean = true//获取任务分类 getRunCategory(timeRefresh) { this.service.getRunningCategory().subscribe(res => { //console.log('任务分类', res) if (res.length == 0) { this.hasdata = f原创 2021-12-27 17:17:36 · 871 阅读 · 0 评论 -
angular http get方法获取数据,非json字符串
http get请求,非json字符串let url = `/api/userinfopro/userinfo/v1.0/userExtend/getUserZj?mobile=${this.phone}`this.http.get(url).subscribe(data=>{ console.log('获取的数据2',data) })这种写法会报错但是数据确实是获取到了解决方法点击ts文件中的get,会跳转到client.d.ts,这里面有get方法的其他写法原创 2021-12-27 14:17:15 · 1196 阅读 · 0 评论 -
24小时内显示最新小图标 new
24小时内显示最新小图标这个代码是同事写的,记录一下发布的新闻时间在 24小时之内就显示new小图标html文件<div class="new" *ngIf="judgeIsNew(item.lastmodificationtime)"> <img [src]="assetsBaseUrl + 'new@2x.png'" /></div>ts文件 judgeIsNew(time){ let targetTime:string = ti原创 2021-12-23 10:38:13 · 225 阅读 · 0 评论 -
angular post请求,往接口里传数组,get请求
接口文件接口文件 // 获取所有的数据 getAllData(params: Array<any>) { const body = params return this.http.post(environment.baseUrl + '/contentsofcolumn/sortedbytime/multicolumncode', body) }index.component.tsconst params = [ { code: '原创 2021-11-30 14:33:42 · 2022 阅读 · 0 评论 -
搜索功能,去掉关键字空格
实现效果1、如果没有关键字点击搜索按钮或者是按下搜索键,提示请输入关键字2、搜索的数据分为四个分类,搜索结果在新页面打开,关键字去除空格实现代码nav-bar.component.html<input type="text" [(ngModel)]="searchContent" class="search-input form-control form-control-sm" style="padding-left: 90px; box-sizing: borde原创 2021-11-29 11:08:22 · 1261 阅读 · 0 评论 -
异步数据按顺序执行
方法一:异步数据按顺序执行local-api.service.ts 接口 //按模型全文检索 commonQuery(moxing,value,pageIndex,pageSize) { const url = '/api/cms/cs/v1.0/columncontent/common/query?permission=true' const param = { "entity": moxing, "filter": { "or": [原创 2021-11-29 10:17:49 · 998 阅读 · 0 评论 -
ng-zorro-antd的loading用法,解决点击tab页时数据显示延迟或者点击清空数据加载数据很慢的问题
需求描述使用ng-zorro-antd中的标签页插件,点击tab页签,表格中的数据会出现一种现象:显示上一个tab的数据2s后,才会变成当前tab对应的表格数据,用户体验不好解决方法:使用loading组件sckg-todo.module.tsimport { NzSpinModule } from 'ng-zorro-antd';@NgModule({ imports: [ NzSpinModule ]})sckg-todo.html<nz-table #smal原创 2021-10-29 09:37:59 · 1741 阅读 · 0 评论 -
angular environment 变量判断ip地址
需求描述测试环境192.268.224.114里请求192.268.224.112的接口,showip为192.268.224.112,测试环境192.268.224.113里请求192.268.224.111的数据,ip地址得写192.268.224.111;实现方法如下:environment.ts配置export const environment = { showip:"http://192.168.224.112"};在接口文件xx.service.ts文件里加判断//引入e原创 2021-10-28 17:18:14 · 1415 阅读 · 0 评论 -
angular实现多重数据筛选,封装post接口,JSON.stringify() ,接口返回数据乱码,splice(),数组删除数据,有的数据显示有的不显示
使用http服务需要在app.module.ts引入http模块import { HttpClientModule } from '@angular/common/http';@NgModule({imports: [ HttpClientModule]})menu中的数据默认是全部显示的中出现的问题出现的问题:请求的接口返回的数据有乱码我封装的接口:后台给的接口是正常的:解决办法:getNavItem(UserCode, Phone, Menus: Array<原创 2021-10-28 10:20:31 · 432 阅读 · 0 评论 -
angular 使用proxy代理
angular使用代理的方式原创 2021-10-28 08:57:20 · 1001 阅读 · 0 评论 -
ng-zorro-antd使用nzShowQuickJumper将英文Goto转化为汉字跳至XX页,国际化简体中文zh_CN
实现效果实现过程我使用的框架是angular7,使用ng-zorro-antd 7.5.1,参考http://ng.ant.design/version/7.5.x/docs/i18n/zhapp.module.ts/** 配置 angular i18n **/import { registerLocaleData } from '@angular/common';import en from '@angular/common/locales/en';/** 配置 ng-zorro-antd原创 2021-10-27 14:58:57 · 671 阅读 · 0 评论 -
angular 实现快捷入口功能
问题:写的接口,部署在服务器上自动出现一长串路径解决办法:ip地址前面增加http原创 2021-10-26 17:18:38 · 93 阅读 · 0 评论 -
switch使用
需求描述根据一个变量column的不同值,在不同页面显示不同内容当column='TZGG’时,页面上显示“通知公告”当column='SZXW’时,页面上显示“时政新闻”当column='GSYW’时,页面上显示“公司要闻”代码实现html<div [ngSwitch]="showData"> <div *ngSwitchCase="1">通知公告</div> <div *ngSwitchCase="2">时政新闻</div>原创 2021-10-20 17:10:15 · 74 阅读 · 0 评论 -
监测路由变化,路由发生变化对应的数据不更新
问题描述路由里的参数值发生变化后,获取不到路由参数值解决办法增加路由监测示例代码ngOnInit() { this.route.queryParams.subscribe(params => { this.columncode = params.columncode this.contentId = params.contentid }) //获取数据 this.getColumnId(this.columncode,this.cont原创 2021-10-19 17:25:40 · 325 阅读 · 0 评论 -
angular 投影 ng-content 将父组件模版上的任意片段投影到子组件上
运行时动态改变组件模版的内容,ngContent指令将父组件模版上的任意片段投影到子组件上。一、一个投影点父组件 app.component.ts<div class="wrapper"> <h2>我是父组件</h2> <!--app-stock-item 是子组件--> <app-stock-item></app-stock-item></div>子组件 stock-item.component.原创 2021-08-18 11:00:41 · 145 阅读 · 0 评论 -
angular配置完路由后找不到匹配路由
问题描述angular配置完路由后不会跳转到指定路由页面,跳转到默认路由界面原因在routing文件里import文件是有顺序的原创 2021-08-11 17:43:16 · 669 阅读 · 1 评论 -
angular 变更检测机制,视图中点击按钮后不能切换数据,再次点击按钮后才显示正确的列表内容
要实现的效果出现的问题本地上测试一切正常,打包后上传成元部件,发不成部件以后出现以下问题1、页面初次加载列表内容显示正常、数量也显示正常2、点击预警按钮不显示预警列表,点击报警按钮后显示预警的列表,再次点击报警按钮显示报警的里列表内容3、每次点击切换打印出来的数据都正常,就是列表展示的数据不正常解决办法:在异步获取数据结束后增加视频变更检测机制import { ChangeDetectorRef } from '@angular/core'constructor( privat原创 2021-07-26 14:12:46 · 304 阅读 · 0 评论 -
用递归算法遍历树,将树的最后一级取出组成新数组
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-07-16 17:18:35 · 1299 阅读 · 0 评论 -
把网站cookie复制到本地项目上,本地项目提示接口401unauthorized,postman post数据
问题描述把网站cookie复制到本地项目上,本地项目提示接口 401错误 unauthorized解决方法尝试使用postman测试接口,每次返回的是html,同事说这个接口用postman没有返回值此图是使用post 获取数据的正确写法,只不过这个没有返回值接口:getData() { this.http.post( '/api/runtime/sys/v1.0/messagecenter/inmail/get', { "pageIndex": "1",原创 2021-07-08 17:40:17 · 573 阅读 · 0 评论 -
angular 父组件异步获取数据传给子组件 undefined
实现效果父组件index,子组件civilication在父组件中用一个接口获取全部数据,然后传给子组件出现的问题undefinedindex.component.ts<app-civilization [categories]="'JTXW'" [data]="data"></app-civilization>civilication.component.ts ngOnInit() { this.anyList = this.data[this.col原创 2021-07-02 16:57:52 · 933 阅读 · 0 评论 -
angular 打开新页面,导航处于选中状态
需求描述1、点击导航打开新页面2、打开的新页面导航处于选中状态,样式包括图标、文字、下划线出现的问题:设置[class.active]=“acticeIndex == i” 打开新页面,新页面的导航并没有处于选中状态,但是原页面上点击到的导航处于选中状态原因分析:新页面中没有acticeIndex值解决方法:在nav组件中设置acticeIndex为输入型字段,在home、news、product组件中分别设置acticeIndex值为0,1,2,这样打开新页面时,就能获取到acticeIn原创 2021-06-23 11:22:41 · 635 阅读 · 0 评论 -
父组件给子组件传递类名[class.red] = true
子组件 index.component.ts<div> 我是带颜色的文字</div>父组件.red { color: red;}<!--给子元素加上类名red--><app-index [class.red] = true></app-index>运行后的效果原创 2021-06-10 16:04:29 · 605 阅读 · 0 评论 -
angular-修改第三方组件、ng-zorro-antd css样式、自适应高度写法、表格td超出宽度隐藏
:host,::ng-deep:host 表示选择当前的组件,只对当前这个组件起作用:host .name { color:white; }::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。 .leftRs ::ng-deep .material-icons { font-size: 44px; line-height: 50px; }也可以这样使用,在当前组件里忽略层级关系:host ::ng-deep .原创 2021-05-25 10:10:12 · 2205 阅读 · 0 评论 -
vsCode常见问题---无语法错误可以正常编译,但在编译器中有红色波浪线
使用vsCode编写代码常见问题—无语法错误可以正常编译,但在编译器中有红色波浪线解决办法原创 2021-05-17 16:10:46 · 2540 阅读 · 0 评论 -
待办任务,真实数据模拟数据切换,打开内部和外部链接,每隔一段时间刷新一次
功能描述:前台通过下拉列表选择模拟数据和真实数据,页面实现模拟数据和真实数据切换实现效果实现方法下面的写法是基于公司已经开发好的平台新建service文件创建真实数据服务、模拟数据服务、真实数据模拟数据切换服务ng g service sevice/task-datang g service sevice/task-mock-datang g service sevice/tasktask-data-service.tsimport { Injectable } from '@a原创 2021-05-14 16:15:33 · 167 阅读 · 0 评论 -
tab页:ng-zorro-antd 使用前台分页,点击tab页切换数据时页码不在默认的第一页
问题描述使用ng-zorro-antd的前台分页(一次性获取全部数据)点击第一个tab页时数据切换到相应tab,点击页码(如第四页页)会切换到相应数据;点击第二个tab页时,页面显示在第四页而不是第一页解决方法html<nz-table #smallTable nzSize="small" [nzData]="data" [nzPageSize]=8 [nzPageIndex]="page" (nzPageIndexChange)="nzPageIndexChange($event)"原创 2021-05-13 16:03:00 · 828 阅读 · 0 评论