Angular
Angular踩坑之旅
S筱潇S四维Smile
代码搬运工~前端engineer
展开
-
Angular 自定义分页组件,自定义每页显示个数
后端返回列表是全部数据,分页前端做的,自定义分页组件实现前端分页,下图为分页效果:1.创建page.component.html<nav class="navigation"> <ul class="pagination"> <li [hidden]="pageTotal<11" class="page-item&qu原创 2019-01-23 11:57:13 · 1713 阅读 · 1 评论 -
Angular 响应式表单 patchValue和setValue
在 Angular 4 中有多种方式可以更新表单的值,对于使用响应式表单的场景,我们可以通过框架内部提供的 API ,(如 patchValue 和 setValue )方便地更新表单的值。这篇文章我们将介绍如何使用 patchValue 和 setValue 方法更新表单的值,此外还会进一步介绍它们之间的差异。Reactive Form Setupapp.module.tsimpo...转载 2019-01-18 16:57:00 · 11240 阅读 · 2 评论 -
Angular 父子组件之间的通讯,自定义组件实现星星评分功能
Angular组件父子间通讯方法:OnInit(), Input() 通过输入属性和输出属性,通过EventEmitter 向父组件发射改变值示例一个星星打分的组件:组件描述:1.根据分数值显示星星个数 2.可点击星星进行打分1.star.component.ts代码示例import { Component, OnInit, Input, Output,EventEmitte...原创 2018-12-21 18:20:23 · 468 阅读 · 0 评论 -
Angular自定义管道(过滤器)方法
1.命令行新建一个管道:放在项目里pipe文件夹里ng g pipe pipe/multiple新建管道之后就声明在app.module.ts文件里了 2.multiple.pipe.ts示例import { Pipe, PipeTransform } from '@angular/core';@Pipe({ name: 'multiple'})expo...原创 2018-12-21 17:44:21 · 1107 阅读 · 0 评论 -
在Angular中添加第三方库jQuery、bootstrap
1.在当前项目目录下执行以下命令添加jQuery和bootstrap:npm install jquery --savenpm install bootstrap --save 2.在项目根目录下找到angular-cli.json文件,将安装的路径加入进去:"styles": [ "styles.css", "../node_modules/bootstrap/di...原创 2018-12-21 17:31:15 · 187 阅读 · 0 评论 -
Angualr 输入文本框监听enter回车键和esc键方法使用(附常用的键盘事件对应的键码)
示例代码:HTML<input class="form-control form-control-sm" id="projectName" type=text [(ngModel)]="newProjectName" placeholder="请输入长度小于30的项目名称" (keyup)="projectNameChanged($event)"&am原创 2018-12-14 16:09:43 · 2817 阅读 · 0 评论 -
Angular使用ng build打包报错 Property 'setControl' does not exist on type 'AbstractControl'.解决方法
在项目打包出现setControl报错解决方法:对于用setControl设置多层级表单的值的用法,会出现这个报错:以下是正确的写法:get services(): FormArray { return this.sltForm.get("Service") as FormArray; }this.services.setControl("SvcInetUrl", t...原创 2018-11-30 15:03:42 · 830 阅读 · 0 评论 -
Angular中响应式表单 FormBuilder、FormControl 、FormGroup、FormArray、setControl、setValue用法总结
以我的项目作为示例,总结一下Angular响应式表单的应用和常用的方法:1.创建表单form.ts代码import { Component, OnInit } from "@angular/core";import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms"...原创 2018-11-28 18:31:47 · 9198 阅读 · 4 评论 -
Angular在FormGroup中使用ngModel失效报错问题的解决办法
在FormGroup中使用ngModel报错解决办法:一行代码就搞定了,在input标签中添加即可:[ngModelOptions]="{standalone: true}"示例:<div class="form-group row" [formGroup]="nameForm"> <div class="col-sm-2"></d原创 2018-11-15 18:02:55 · 2384 阅读 · 0 评论 -
Angular URL地址参数改变,视图不更新的解决办法(监听URL变化,重新加载数据方法)
import { ActivatedRoute,Router,NavigationEnd } from '@angular/router'; //钩子(组件组装完成之后调用的方法,仅调用一次)ngAfterViewInit(){// 监听路由变化this.router.events.filter((event) => event instanceof Naviga...原创 2018-07-09 10:48:18 · 6164 阅读 · 0 评论 -
Angular 项目打包之后,部署到服务器,刷新访问404解决方法
将前端代码打包部署到Java服务器中,当跳转到相应路由界面,刷新地址,服务找不到地址页面,所以会报 404 - Page Not Found。解决方法:只需要将路由转换成哈希值: userHash: true,将路由转化成“#”号的形式以下两种方式修改路由,使用hash:1、app.module.tsimports: [ RouterModule.forRoot(ro...原创 2018-07-09 10:55:16 · 5066 阅读 · 0 评论 -
Angular 启动项目时 port 4200 is already in use 解决方法
(1)相应找到以下目录node_modules/@angular/cli/lib/config/ 中的 schema.json(2)搜索到到默认的“4200”端口,(3)把4200 改为其它的没有被占用的端口,如6200 。(4)npm start 就可以启动了若以上方法无效,使用以下方法: (1) $ sudo lsof -i :4200 (2) $ kill -9...原创 2018-07-09 11:27:05 · 2993 阅读 · 0 评论 -
Angualr 加载速度慢,为页面初始化完成前添加loading
1、在项目根目录下index.html添加loading模板: <div class="loading-box" id="loading"> <div class="mark"></div> <img width="20" height="20" src="assets/i原创 2018-08-08 16:48:26 · 1028 阅读 · 0 评论 -
Property 'filter' does not exist on type 'Observable' 报错解决方法
我想做的是监听地址参数变化:import 'rxjs/operator/filter';//...this.router.events .filter((event:Event) => event instanceof NavigationEnd) .subscribe(x => console.log(x))但报错如下图显示:解决方法:对于R...原创 2018-08-08 17:02:49 · 4794 阅读 · 0 评论 -
Angular 项目中使用 ECharts 图表示例
最近项目需要用到echarts图表,但网上关于结合angular使用不多,而且总是导入报错,关于我用的版本做一个总结:(angular v6.0.9,echarts v4.1.0,@types/echarts v0.0.13)1.安装 typings 库,以及 ECharts:npm install typings echarts --global2.安装 ECharts 的 T...原创 2018-08-08 17:30:01 · 3545 阅读 · 3 评论 -
Angualr routerLink 两种传参方法及参数的使用
1.路径:http://localhost:8080/#/product?id=1<a [routerLink]="['/product']" [queryParams]="{id:1}">详情</a>ts获取查询参数:import { Component, OnInit } from "@angular/core";import { ActivatedR...原创 2018-08-08 18:23:46 · 12483 阅读 · 0 评论 -
Anguar 使用interceptor拦截器设置请求头传入jwt token
1.创建http-interceptors.ts文件import { Injectable } from "@angular/core";import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse, HttpHeaderResponse, HttpResponse, HttpEven...原创 2018-08-28 17:08:47 · 3457 阅读 · 3 评论 -
Angular 自定义loading组件
1.在shared目录下新建loading文件夹loading.component.html代码:<div id="loading" class="loading" *ngIf="showLoading"> <img src="/assets/img/loading.gif"></div>2.loading.component.ts代码...原创 2018-08-28 17:22:43 · 3836 阅读 · 10 评论 -
Angular 在项目中使用fullcalendar 日程表
1.安装fullcalendarnpm install --save jquery fullcalendarnpm install --save-dev typescript webpack awesome-typescript-loader source-map-loadernpm install --save-dev @types/jquery2.组件中引入import *...原创 2018-09-12 17:16:23 · 3178 阅读 · 0 评论