如何封装有事件的自定义angular组件?
How to encapsulate customized angular component that has events?
我正在使用来自 ng-bootstrap(我自定义的)的 pagination component,我想在其他地方重用该组件,而不必重写代码。
由于 ngb-pagination
组件具有双向绑定 属性 page
,我需要适当地将 属性 公开给父组件。
我知道问题出在下面的组件上,因为如果我使用标准组件,而不是在组件内部,它可以正常工作。
import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
import { faChevronLeft, faChevronRight, faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-pagination',
template: `
<div class="d-flex justify-content-between p-2">
<ngb-pagination [collectionSize]="collectionSize" [page]="page" (pageChange)="pageChange" [pageSize]="pageSize" [boundaryLinks]="true">
<ng-template ngbPaginationFirst>
<fa-icon class="fas" [icon]="faAngleDoubleLeft" aria-hidden="true"></fa-icon>
</ng-template>
<ng-template ngbPaginationLast>
<fa-icon class="fas" [icon]="faAngleDoubleRight" aria-hidden="true"></fa-icon>
</ng-template>
<ng-template ngbPaginationPages let-page let-pages="pages">
<li class="ngb-custom-pages-item" *ngIf="pages.length > 0">
<div class="form-group d-flex flex-nowrap px-2">
<label id="paginationInputLabel" for="paginationInput" class="col-form-label mr-2 ml-1">Page</label>
<input #i type="text" inputmode="numeric" pattern="[0-9]*" class="form-control custom-pages-input"
id="paginationInput" [value]="page" (keyup.enter)="selectPage(i.value)" (blur)="selectPage(i.value)"
(input)="formatInput($any($event).target)" aria-labelledby="paginationInputLabel paginationDescription"
style="width: 2.5rem"/>
<span id="paginationDescription" class="col-form-label text-nowrap px-2">of {{pages.length}}</span>
</div>
</li>
</ng-template>
<ng-template ngbPaginationPrevious>
<fa-icon class="fas" [icon]="faChevronLeft" aria-hidden="true"></fa-icon>
</ng-template>
<ng-template ngbPaginationNext>
<fa-icon class="fas" [icon]="faChevronRight" aria-hidden="true"></fa-icon>
</ng-template>
</ngb-pagination>
</div>
`,
styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit {
faChevronLeft = faChevronLeft;
faChevronRight = faChevronRight;
faAngleDoubleLeft = faAngleDoubleLeft;
faAngleDoubleRight = faAngleDoubleRight;
@Input() collectionSize: number = 20;
@Input() page: number = 1;
@Output() pageChange = new EventEmitter<number>();
@Input() pageSize: number = 10;
constructor() { }
ngOnInit(): void {
}
selectPage(page: string) {
this.page = parseInt(page, 10) || 1;
}
formatInput(input: HTMLInputElement) {
input.value = input.value.replace('/[^0-9]/g', '');
}
}
我简单地使用这个组件(我正在关注 complete table example):
<app-pagination [collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="service.pageSize">
</app-pagination>
那么,如何正确公开属性和事件?
您需要从组件发出事件:
<ngb-pagination [collectionSize]="collectionSize" [page]="page" (pageChange)="pageChange.emit($event)" [pageSize]="pageSize" [boundaryLinks]="true">
...
selectPage(page: string) {
this.page = parseInt(page, 10) || 1;
this.pageChange.emit(this.page);
}
我正在使用来自 ng-bootstrap(我自定义的)的 pagination component,我想在其他地方重用该组件,而不必重写代码。
由于 ngb-pagination
组件具有双向绑定 属性 page
,我需要适当地将 属性 公开给父组件。
我知道问题出在下面的组件上,因为如果我使用标准组件,而不是在组件内部,它可以正常工作。
import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
import { faChevronLeft, faChevronRight, faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-pagination',
template: `
<div class="d-flex justify-content-between p-2">
<ngb-pagination [collectionSize]="collectionSize" [page]="page" (pageChange)="pageChange" [pageSize]="pageSize" [boundaryLinks]="true">
<ng-template ngbPaginationFirst>
<fa-icon class="fas" [icon]="faAngleDoubleLeft" aria-hidden="true"></fa-icon>
</ng-template>
<ng-template ngbPaginationLast>
<fa-icon class="fas" [icon]="faAngleDoubleRight" aria-hidden="true"></fa-icon>
</ng-template>
<ng-template ngbPaginationPages let-page let-pages="pages">
<li class="ngb-custom-pages-item" *ngIf="pages.length > 0">
<div class="form-group d-flex flex-nowrap px-2">
<label id="paginationInputLabel" for="paginationInput" class="col-form-label mr-2 ml-1">Page</label>
<input #i type="text" inputmode="numeric" pattern="[0-9]*" class="form-control custom-pages-input"
id="paginationInput" [value]="page" (keyup.enter)="selectPage(i.value)" (blur)="selectPage(i.value)"
(input)="formatInput($any($event).target)" aria-labelledby="paginationInputLabel paginationDescription"
style="width: 2.5rem"/>
<span id="paginationDescription" class="col-form-label text-nowrap px-2">of {{pages.length}}</span>
</div>
</li>
</ng-template>
<ng-template ngbPaginationPrevious>
<fa-icon class="fas" [icon]="faChevronLeft" aria-hidden="true"></fa-icon>
</ng-template>
<ng-template ngbPaginationNext>
<fa-icon class="fas" [icon]="faChevronRight" aria-hidden="true"></fa-icon>
</ng-template>
</ngb-pagination>
</div>
`,
styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit {
faChevronLeft = faChevronLeft;
faChevronRight = faChevronRight;
faAngleDoubleLeft = faAngleDoubleLeft;
faAngleDoubleRight = faAngleDoubleRight;
@Input() collectionSize: number = 20;
@Input() page: number = 1;
@Output() pageChange = new EventEmitter<number>();
@Input() pageSize: number = 10;
constructor() { }
ngOnInit(): void {
}
selectPage(page: string) {
this.page = parseInt(page, 10) || 1;
}
formatInput(input: HTMLInputElement) {
input.value = input.value.replace('/[^0-9]/g', '');
}
}
我简单地使用这个组件(我正在关注 complete table example):
<app-pagination [collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="service.pageSize">
</app-pagination>
那么,如何正确公开属性和事件?
您需要从组件发出事件:
<ngb-pagination [collectionSize]="collectionSize" [page]="page" (pageChange)="pageChange.emit($event)" [pageSize]="pageSize" [boundaryLinks]="true">
...
selectPage(page: string) {
this.page = parseInt(page, 10) || 1;
this.pageChange.emit(this.page);
}