如何封裝有事件的自定義angular組件？

我正在使用來自ng-bootstrap的分頁組件（這是我自定義的），我想在其他地方重復使用該組件，而無需重寫代碼。

由于ngb-pagination組件有一個雙向的系結屬性page，我需要適當地將該屬性暴露給父組件。

我知道問題出在下面的組件上，因為如果我使用標準的組件，而不是在一個組件內，它可以正常作業。

import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core'。

import { faChevronLeft, faChevronRight, faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons'/span>;

@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>

                <輸入#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">的{{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 實作 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'/span>, '')。
  }
}

而我簡單的使用組件是這樣的（我是按照完整表格的例子）：

<app-pagination [collectionSize]="（total$ | async）! " [(page)]="service.page" [pageSize]="service.pageSize">
</app-pagination>

那么，我怎樣才能正確地暴露出這些屬性和事件呢？

uj5u.com熱心網友回復：

你需要從組件中發射事件：

你需要從組件中發射事件。

 <ngb-pagination [collectionSize]="collectionSize"/span> [page]="page"/span> （pageChange）="pageChange. emit($event)" [pageSize]="pageSize" [boundaryLinks]="true">

...

 selectPage（page: string）{
    this.page = parseInt(page, 10) || 1;
    this.pageChange.emit(this.page) 。
  }

標籤：

上一篇：訂閱AngularFormGroup的方法，使其得到重點關注。

下一篇：10道經典Java入門案例——保姆級教程，新手自學必備（建議收藏）