![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
angular
大佬别喷记录博客只为自己学习记录
这个作者很懒,什么都没留下…
展开
-
【angular-实践】由数据生成表单,多层嵌套
需求根据数组生成不定数量的表单项,数组中的value项可能为数组,可能为字符串效果ui_type为editbox是value是字符串;为editboxes时是数组interface T { key: string, value: any, ui_type: string, ui_title: string}testData: T[] = [ { "key": "title", "value": "1-1数据", "ui_type": "editbo原创 2022-03-07 20:23:43 · 979 阅读 · 0 评论 -
【angular-实践】导入/导出excel
安装依赖npm install @notadd/ngx-xlsx -Snpm install xlsx -Snpm install file-saver -S使用步骤添加NgxXLSXModule到你的Angular Module import { NgxXLSXModule } from '@notadd/ngx-xlsx'; @NgModule({ imports: [ ... NgxXLSXModule ], decla原创 2022-03-01 00:36:22 · 1096 阅读 · 0 评论 -
【angular-实践】动态增加表单(一层,多层表单嵌套)
响应式表单嵌套结构效果一层表单动态增加[Angular]——动态增加表单项二层表单嵌套实现form-nested.component.html<nz-divider [nzText]="'表单嵌套'"></nz-divider><form [formGroup]="validateForm"> <nz-form-item> <nz-form-label nzSpan="3" nz-col> 工作流名原创 2022-02-24 15:05:27 · 2132 阅读 · 0 评论 -
【angular-实践】websocket + python tornado
angular前端写一个websocket服务src/app/service/websocket.service.tsimport { Injectable } from '@angular/core';import { Observable } from 'rxjs';import { Subject } from 'rxjs';@Injectable({ providedIn: 'root'})export class WebsocketService { privat原创 2022-02-17 20:17:43 · 1279 阅读 · 0 评论 -
【angular-实践】angular预加载
预加载的场景当应用启动后,后续功能可能会被使用到,因此在用户可以使用基础的功能后,再去加载可能使用到的模块只预加载必要的模块,可以提高首次访问网站的速度代码实现1 全部预加载src\app\router\app-routing.module.tsimport { PreloadAllModules, RouterModule } from '@angular/router';@NgModule({imports: [ CommonModule, RouterModule原创 2022-01-15 16:22:47 · 816 阅读 · 0 评论 -
【angular-实践】angular懒加载(异步路由)
以登录模块为例创建带路由的模块及组件ng g m pages/login --routingng g c pages/loginsrc\app\pages\login\login-routing.module.tsimport { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';import { LoginComponent } from './login.co原创 2022-01-14 15:53:29 · 947 阅读 · 0 评论 -
【angular-实践】npm配合gitlab管理项目依赖库
readme在gitlab上创建两个项目simple-ui UI组件库 。用来开发组件库simple-ui-builds 依赖库。用来发布组件库,即相当于npm私有库的作用,省去搭建npm私有库的流程步骤1 准备组件库创建项目项目名为sim-simple, 创建出来的文件夹名称是--directory=simple-ui指定的simple-uing new sim-simple --directory=simple-ui创建依赖库ng g library simpl原创 2022-01-05 13:39:44 · 774 阅读 · 0 评论 -
【angular-实践】nginx部署angular项目
目录nginx根目录部署angular项目nginx子目录部署angular项目其他方法-docker(未实践)readme我的项目名叫qlnc-adminnginx用docker装的,nginx的/usr/share/nginx/html目录挂载在/home/nginx/html一 nginx根目录部署angular项目打包ng build --prod将生成文件夹dist/qlnc-admin中的qlnc-admin文件夹拷贝到/home/nginx/html根目录下原创 2022-01-04 20:09:25 · 3279 阅读 · 0 评论 -
【angular-实践】FormGroup的属性双向绑定修改后number会变为string
解决办法,在post时,将属性值isActive-0 submitForm: FormGroup = this.fb.group({ name: ['0', [Validators.required]], isActive: [5, [Validators.required]], }) onSubmit(): void { if (this.submitForm.valid) { const formValue = this.submitForm.value原创 2021-12-30 17:40:05 · 603 阅读 · 0 评论 -
【angular-基础教程】更改formgroup的中属性的值
this.myForm = this.fb.group({ name: ['123'],}); //把emNumber修改成F0124this.myForm.patchValue({name: '456'});原创 2021-12-29 19:57:53 · 869 阅读 · 0 评论 -
【angular-基础教程】Validators动态表单验证
官网内置验证器// 必填Validators.required// 最小长度Validators.minLength(2)// 最大宽度Validators.maxLength(2)// 手机号码的正则const PHONE_NUMBER_REGEXP = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/this.employeeEditForm = thi原创 2021-12-29 14:54:23 · 1365 阅读 · 0 评论 -
【angular-基础教程】内置结构型指令NgIf
if else参考方式一<div *ngIf="isValid;else other_content"> content here ...</div><ng-template #other_content>other content here...</ng-template>方式二<div *ngIf="isValid;then content else other_content">here is ignored<原创 2021-12-29 11:24:37 · 434 阅读 · 0 评论 -
【angular-错误】vscode中imort组件没有提示
在vscode中import导入组件的时候突然没有提示了,一个原因是app目录下存在两个module.ts,将一个移动到另一个文件夹就好。另一个原因可能是registerLocaleData(zh);写在这句代码之前没有提示,写在之后就可以。(真无语,找了半天)import zh from '@angular/common/locales/zh';// 写在这没有提示,无自动补全registerLocaleData(zh);// 写在这就有有提示无提示...原创 2021-12-16 16:41:33 · 498 阅读 · 0 评论 -
【angular-实践】路由传参跳转
传参方式routerLink传参routerLinkrouterLink && queryParams路由中传参navigate传参navigateByUrl(待完善)方式一 routerLink1 routerLinkrouterLink跳转<!-- 3种方法: 设置参数变量的 值 --><a routerLink="/test/1"> 跳转1</a><a [routerLink]="['/test/2']">原创 2021-12-15 21:38:53 · 922 阅读 · 0 评论 -
【angular-实践】数据监听并渲染到界面上
背景为了做一个面包屑的样式思路三个界面:根页面: index(展示面包屑)资金页面: fund(展示收入、支出,属于同一个页面)步骤:在index服务中存BehaviorSubject类型的变量crumbData,在found组件中监听路由变化,根据路由参数设置不同的面包屑数据,在index组件中订阅crumbData变量出现的问题:如果不用BehaviorSubject订阅,直接设为一个列表,在更新时,会报错:数据已经检查后被修改ExpressionChangedAfterItHa原创 2021-12-15 19:52:53 · 1562 阅读 · 0 评论 -
【angular-基础教程】input标签使用ngModel数据双向绑定
.tsimport { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';.html<input [(ngModel)]="userForm.username">参考原创 2021-12-09 19:49:04 · 1084 阅读 · 0 评论 -
【angular-实践】通过sessionStorage与token维护用户登录状态
通过sessionStorage与token维护用户登录状态login/login.component.html<input type="text" [value]="userForm.username"><input type="text" [value]="userForm.password"><button (click)="login()">login</button>login/login.component.tsimport { Co原创 2021-12-01 16:29:33 · 844 阅读 · 0 评论 -
【angular-基础教程】httpclient
基础用法app.module.tsimport { HttpClientModule } from '@angular/common/http'@NgModule({ imports: [ HttpClientModule ]})export class AppModule { }app.component.tsimport { HttpClient } from '@angular/common/http';@Component({ selector: 'app-原创 2021-12-01 16:06:38 · 775 阅读 · 0 评论 -
【angular-基础教程】取消自动生成spec.ts文件
spec作用spec文件是你的源文件的单元测试。Angular应用程序的约定是每个.ts文件都有一个.spec.ts文件。当你使用’ng test’命令时,它们通过Karma任务运行器使用Jasmine javascript测试框架运行。取消自动生成创建项目时添加参数--skip-testsng generate application <name> --skip-tests创建项目后angular.json添加"skipTests": true "schemati原创 2021-11-30 17:56:13 · 2058 阅读 · 0 评论 -
【angular-基础教程】常用命令
官网ng gng g c <组件名>--spec=false 排除生成规范文件(“spec.ts” 为测试文件)原创 2021-11-30 16:51:49 · 395 阅读 · 0 评论 -
【angular-实践】实现浏览器F11全屏效果
.html<div (click)="fullscreenToggle()">全屏</div>.component.tsdeclare const document: any;@Component({ selector: 'uv-header', templateUrl: './header.component.html', styleUrls: ['./header.component.less']})export class HeaderCompone原创 2021-11-30 15:41:21 · 360 阅读 · 0 评论 -
【angular-实践】实现简单分页
.html <!-- 菜单栏 --> <div class="header-menu"> <ul nz-menu nzMode="horizontal" nzTheme="dark"> // 上一页 <i nz-icon nzType="left" nzTheme="outline" (click)="prePage()"></i> <ng-container *ngFor="原创 2021-11-26 15:51:12 · 797 阅读 · 0 评论 -
【angular-基础教程】内置结构型指令NgFor
介绍NgFor —— 为列表中的每个条目重复渲染一个节点。就是for循环官网教程实践基础用法.html<div *ngFor="let item of items">{{item.name}}</div>获取循环下标<div *ngFor="let item of items; let i=index">{{i + 1}} - {{item.name}}</div>trackBy跟踪条目通过跟踪对条目列表的更改,可以减少应用程序对原创 2021-11-26 15:25:47 · 648 阅读 · 0 评论 -
【angular-实践】RouteReuseStrategy路由缓存-tabs页标签切换页面
RouteReuseStrategy是什么RouteReuseStrategy接口声明了5个方法。shouldReuseRoute这个方法每次切换路由时都会被调用。future参数是将要离开的路由,curr参数是将要加载的路由。如果这个方法返回true,路由将不会跳转(意味着路由没有发生变化)。如果它返回false,则路由发生变化并且其余方法会被调用。shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapsh原创 2021-11-24 20:56:19 · 792 阅读 · 0 评论 -
【angular-基础教程】引入外部js
步骤1.将引入的外部js文件放到assets文件下2.在angular.json文件中找到scripts配置js文件路径(注意不要添加到test标签下的scripts中)"scripts": [ "src/assets/lib/echarts.js", "src/assets/lib/jquery-2.1.1.min.js", "src/assets/js/test.js", "src/assets/js/swiper.min.js", "src/assets原创 2021-11-24 18:42:40 · 2710 阅读 · 0 评论 -
【angular-基础教程】引入jQuery
angular中使用jquery的步骤:第一步:安装jquerynpm install --save jquery第二步:安装jQuery的声明文件npm install @types/jquery --save第三步:检查安装是否成功前两步成功的话,会在package.json文件中多处这两行"@types/jquery":"^3.2.12","jquery":"^3.2.1",第四步:使用jquery先使用impor命令引用jquery,然后就可以在需要的地方使用jquery。原创 2021-11-24 18:30:44 · 1358 阅读 · 0 评论 -
【angular-基础教程】属性指令NgStyle
博客首页导航实践1app.component.html<img [ngStyle]="{width: '30px', height: '40px'}">app.component.ts@Input() xAxis: Array<string> = ['1月', '2月', '3月', '4月', '5月']实践2根据不同值设定不同样式<button nz-button nzType="primary" [ngStyle]="{'backg原创 2021-11-23 20:35:28 · 608 阅读 · 0 评论 -
【angular-基础教程】使用自定义管道
新建管道ng g p bool2textFilterbool2text-filter.pipe.tsimport { Pipe, PipeTransform } from '@angular/core';@Pipe({ name: 'bool2textFilter'})export class Bool2textFilterPipe implements PipeTransform { transform(value: unknown, ...args: unknown[]): u原创 2021-11-23 20:22:33 · 365 阅读 · 0 评论