分頁組件一般只某個頁面的一小部分，所以我們它是子組件
- 當然如果你承認這話的，可以往下看，因為我把他當作子組建來寫了
分頁組件的模版
import { Component } from '@angular/core';
@Component({
selector : "page",
template :`
<div class="page ellipsis">
<ul class="pagination" *ngIf="pageList">
<li><a href="#" aria-label="Previous" class="prev"><span aria-hidden="true">«</span></a></li>
<li *ngFor="let list of pageList"><a href="#">{{ list.pageid }}</a></li>
<li (click)="Tomessage( icur+1 )"><a href="#" aria-label="Next" class="next"><span aria-hidden="true">»</span></a></li>
</ul>
</div>
`,
styleUrls: ['./page.css'] //css樣式就是bootstrap的那個
})
export class PageComponent {}
在組件中生成 pageList = []; 模擬數據
//數據結構如下
pageList = [
{
pageid: number = 1
}
{
pageid: number = 2
}
]
//生成pageList的數組
getPageList () {
//console.log(this.pageParams)
let total = 150;
let size = 10;
let icur = this.icur; //當前頁碼
let num = Math.ceil( total / size )
for ( var i = 0 ; i< num ;i++ ) {
if(num <= 5){
this.pageList.push({
pageid : i+1,
pageicur :icur
})
}else if( num - icur < 5 && icur > 4){
this.pageList = [
{
pageid: icur - 4,
pageicur :icur
}, {
pageid: icur - 3,
pageicur :icur
}, {
pageid: icur - 2,
pageicur :icur
}, {
pageid: icur - 1,
pageicur :icur
}, {
pageid: icur,
pageicur :icur
}
];
}else{
let cur = Math.floor((icur - 1) / 5) * 5 + 1
this.pageList = [
{
pageid: cur ,
pageicur :icur
}, {
pageid: cur + 1,
pageicur :icur
}, {
pageid: cur + 2,
pageicur :icur
}, {
pageid: cur + 3,
pageicur :icur
}, {
pageid: cur + 4,
pageicur :icur
}
]
}
}
}
引入 裝飾器Output 時間發射器EventEmitter 鈎子函數的一種狀態OnInit
//如下所示
import { Component, Output, EventEmitter, OnInit } from '@angular/core';
- 此時模版的結構---就變成這個樣子了
import { Component, Output, EventEmitter, OnInit } from '@angular/core';
@Component({
selector : "page",
template :`
//....
`,
styleUrls: ['./page.css'] //css樣式就是bootstrap的那個
})
export class PageComponent implements OnInit{
//這個數據應該是一步獲得的
private pageList = [];
private icur = 1; //這里是私有變量
//組件初始化的時候調用該函數
ngOnInit(): void {
this.getPageList();
}
//分頁函數
getPageList () {
//.....
}
}
此時組件的基本結構都有了，然后創建一個父組件
import { Component } from '@angular/core';
import { PageComponent } from "./son.component"; //別忘記在父組建中導入了
@Component({
selector: 'app-root',
template: `
<page> </page>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
至此到這一步，應該可以看到一個效果圖
! [page圖] (http://images.cnblogs.com/cnblogs_com/he-zhi/1004820/o_2.png)
當然，現在這種東西很明顯沒有什么亂用，點擊向上的話，就需要將icur這個值不斷的增加
- 此時就需要設計到子組件---> 父組件之間的通訊
//需要一些什么東西呢 --這個裝飾器@Output h還有事件發射器EventEmitter
//PageComponent 中導入所需要的動西
import { Component, Output, EventEmitter, OnInit } from '@angular/core';
//第二步---實例化一個發射器
@Output() OnChange: EventEmitter<string> = new EventEmitter();
//注冊一個事件，點擊的時候出發
Tomessage(value: any){
this.OnChange.emit( value )
this.icur = value;
}
//第三步需要到父組建中幫頂OnChange
//AppComponent
import { Component } from '@angular/core';
import { PageComponent } from "./son.component"; //別忘記在父組建中導入了
@Component({
selector: 'app-root',
template: `
<page (OnChange)="any($num)"> </page> //這里有一$千萬不能省略
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
any(num:any){
alert(num);
}
}
至此所有的注意點 基本標注了，以下是分頁組件的全部完整demo
如果你想跑起來，你需要先使用 angular的腳手架創建一個項目結構 基本賦值黏貼就可以了，
關於子組建到---父組建的通訊，感覺太簡單 就沒有細說 子組建發射 --- 父組建接受
import { Component, Output, EventEmitter, OnInit } from '@angular/core';
@Component({
selector : "page",
template :`
<div class="page ellipsis">
<ul class="pagination" *ngIf="pageList">
<li><a href="#" aria-label="Previous" class="prev"><span aria-hidden="true">«</span></a></li>
<li *ngFor="let list of pageList"><a href="#">{{ list.pageid }}</a></li>
<li (click)="Tomessage( icur+1 )"><a href="#" aria-label="Next" class="next"><span aria-hidden="true">»</span></a></li>
</ul>
</div>
`,
styleUrls: ['./page.css'] //css樣式就是bootstrap的那個
})
export class PageComponent implements OnInit{
@Output() OnChange: EventEmitter<string> = new EventEmitter();
Tomessage(value: any){
this.OnChange.emit( value )
this.icur = value;
}
//這個數據應該是一步獲得的
pageList = [];
icur = 1; //這里是全局變量
ngOnInit(): void {
this.getPageList();
}
//分頁函數
getPageList () {
//console.log(this.pageParams)
let total = 150;
let size = 10;
let icur = this.icur; //當前頁碼
let num = Math.ceil( total / size )
for ( var i = 0 ; i< num ;i++ ) {
if(num <= 5){
this.pageList.push({
pageid : i+1,
pageicur :icur
})
}else if( num - icur < 5 && icur > 4){
this.pageList = [
{
pageid: icur - 4,
pageicur :icur
}, {
pageid: icur - 3,
pageicur :icur
}, {
pageid: icur - 2,
pageicur :icur
}, {
pageid: icur - 1,
pageicur :icur
}, {
pageid: icur,
pageicur :icur
}
];
}else{
let cur = Math.floor((icur - 1) / 5) * 5 + 1
this.pageList = [
{
pageid: cur ,
pageicur :icur
}, {
pageid: cur + 1,
pageicur :icur
}, {
pageid: cur + 2,
pageicur :icur
}, {
pageid: cur + 3,
pageicur :icur
}, {
pageid: cur + 4,
pageicur :icur
}
]
}
}
}
}