声明：这篇是我学习angualr的笔记，可以转载，但必须注明来源作者 kone 并附上本文链接

上一篇Angular8入门学习笔记讲了一些Angualr基本的入门知识.并没有针对项目的实际功能支持,如Angualr分页查询和Angualr文件上传要注意的坑.这一篇就来了.

Angular分页

先把分页代码贴上来

1:pagination.component.html

<ul class="pagination"><li><a (click)="changePage(0)"><i class="iconfont" title="首页">首页</i></a></li><li [class.disabled]="currentPage < 1"><a (click)="goPrevious(currentPage)"><i class="iconfont" title="上一页">&lt;</i></a></li><li class="disabled" *ngIf="currentPage > 3"><a>...</a></li><li *ngIf="currentPage >= 3"><a (click)="changePage(currentPage-3)">{{currentPage-2}}</a></li><li *ngIf="currentPage >= 2"><a (click)="changePage(currentPage-2)">{{currentPage-1}}</a></li><li *ngIf="currentPage >= 1"><a (click)="changePage(currentPage-1)">{{currentPage}}</a></li><li class="active"><a (click)="changePage(currentPage)">{{currentPage+1}}</a></li><li *ngIf="currentPage <= totalPage-2"><a (click)="changePage(currentPage+1)">{{currentPage+2}}</a></li><li *ngIf="currentPage <= totalPage-3"><a (click)="changePage(currentPage+2)">{{currentPage+3}}</a></li>``<li *ngIf="currentPage <= totalPage-4"><a (click)="changePage(currentPage+3)">{{currentPage+4}}</a></li><li class="disabled" *ngIf="currentPage < totalPage-4"><a>...</a></li><li [class.disabled]="currentPage > totalPage-2"><a (click)="goNext(currentPage)"><i class="iconfont" title="下一页">&gt;</i></a></li><li><a (click)="changePage(totalPage-1)"><i class="iconfont" title="末页">末页</i></a></li>
</ul>

2:pagination.component.ts

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';/*
功能：分页组件
用法：
html：<hw-pagination [currentPage]="currentPage" [totalPage]="totalPage" (pageChange)="changePage($event)"> </hw-pagination>
ts：   private changePage(event){this.currentPage=event;}
注意：currentPage 从0开始
*/
@Component({selector: 'hw-pagination',templateUrl: './pagination.component.html',styleUrls: ['./pagination.component.css']
})
export class PaginationComponent implements OnInit {@Input() totalPage: number;@Input() currentPage: number;@Output() pageChange = new EventEmitter<number>();constructor() { }ngOnInit() {}changePage(pageNum) {this.pageChange.emit(pageNum);}goPrevious(pageNum) {if (pageNum >= 1) {this.changePage(pageNum - 1);}}goNext(pageNum) {if (pageNum <= this.totalPage - 2) {this.changePage(pageNum + 1);}}
}

3:pagination.component.css

.pagination li {cursor: pointer;
}.iconfont {color: #337ab7;
}.pagination a {height: 34px;
}

4:使用之前

我这里自定义了一个module,在该module里都是对一些公共组件(叫插件更贴切),然后在app.module.ts里面就不用一个个引入这些插件,直接import这个自定义的module就可以了.
在被其他组件调用之前先要把这个分页组件对外暴露:如下,另外两个是上传的组件和防止重复点击组件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PaginationComponent } from './component/pagination/pagination.component';
import { DebounceClickDirective } from './directive/debounce-click.directive';
import { ErrorImgDirective } from './directive/error-img.directive';
import { FileUploadComponent } from './component/file-upload/file-upload.component';@NgModule({imports: [CommonModule],declarations: [PaginationComponent, DebounceClickDirective, ErrorImgDirective, FileUploadComponent],exports: [PaginationComponent, DebounceClickDirective,FileUploadComponent]
})
export class SharedModule { }

5:使用分页组件和防止重复点击组件

html:

<button (click)="getUser()"  >普通查詢列表</button>
<button hwDebounceClick (debounceClick)="getUser2()" [debounceTime]="300">防止重複提交查詢列表</button>
<br>
<hr>
<table class="usertable"><th>姓名</th><th>AD</th><th>email</th><th>adress</th><th>phone</th><tr *ngFor="let item of userList; let i=index" ><td>{{item.name}}</td><td>{{item.AD}}</td><td>{{item.email}}</td><td>{{item.adress}}</td><td>{{item.phone}}</td></tr></table>
<hw-pagination [currentPage]="currentPage" [totalPage]="totalPage" (pageChange)="changePage($event)"> </hw-pagination>

ts:

import { PaginationComponent } from './../../../shared/component/pagination/pagination.component';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { CookieService } from 'ngx-cookie-service';
import * as $  from 'jquery';
@Component({selector: 'app-echarts',templateUrl: './echarts.component.html',styleUrls: ['./echarts.component.css']
})
export class EchartsComponent implements OnInit {public userList:any;constructor(private router: Router,public http: HttpClient,private cookieService: CookieService) { }currentPage:number=0;totalPage:number=1;ngOnInit() {}getUser(){console.log('当前页数'+(this.currentPage+1));let url = "http://localhost:8080/getMembers?currentPage="+(this.currentPage+1);const header = {headers: new HttpHeaders({'Content-Type': 'application/json'})};this.http.post(url,{},header).subscribe(re=>{this.totalPage=18;this.userList=re;console.log( this.userList);});}//防止短時間內重複提交getUser2(){console.log('当前页数'+(this.currentPage+1));let url = "http://localhost:8080/getMembers?currentPage="+(this.currentPage+1);const header = {headers: new HttpHeaders({'Content-Type': 'application/json'})};this.http.post(url,{},header).subscribe(re=>{this.totalPage=18;this.userList=re;console.log( this.userList);});}private changePage(event){this.currentPage=event;//这里注意一下方法调用的顺序this.getUser();}}

css

.usertable{border: 1px solid black;width: 600px;
}
.usertable th,tr{height: 10px;
}
.usertable th,td{border: 1px solid black;text-align: center;
}

6:后台java

假数据哈,别介意

  @RequestMapping(value = "/getMembers",method = RequestMethod.POST)public List getMembers(@RequestParam(name = "currentPage") int currentPage){System.out.println("当前页数:"+currentPage);List list=new ArrayList();for(int i=0;i<25;i++){Map<String,Object> map=new HashMap<String,Object>();map.put("name","kone"+(i+1));map.put("AD","R"+(i+2500));map.put("email",(i+1)+".mitac.com");map.put("adress","永和一村"+(i+45)+"棟");map.put("phone",1832618680+i);list.add(map);}return list;}

7:效果

8:小结

这里面用到了#Input和@Output,父子组件的通信.可以参考上一篇

Angular上传文件

html:

  <!-- 上传单个文件 --><div><input type="file" (change)="uploadFile($event)" name="value" value="测试上传单个文件"/></div><br><br>
<p style="color: red">{{resultInfo}}</p>

ts

  // post方式上传单个文件uploadFile(event) {let file: FormData = new FormData();let fileList: FileList = event.target.files;if (fileList.length > 0) {let file: File = fileList[0];let formData: FormData = new FormData();formData.append('value', file, file.name);let url = this.baseUrl + "/importExcel";const header = {headers: new HttpHeaders({'Accept':'application/json'})};this.http.post(url,formData,header).subscribe(re=>{this.resultInfo=re['msg'];});}}

这个比较简单,贴出这个只是记录一下这个可能会是个坑

 const header = {headers: new HttpHeaders({'Accept':'application/json'})};