PrimeNG 簡介

當然，以下是針對PrimeNG的教學內容，包括各個元件的使用方法和範例，使用的程式語言為TypeScript，這是Angular應用程式中常用的語言。

PrimeNG 常用表單元件

PrimeNG是一個功能豐富的UI組件庫，專為Angular應用程式設計。它提供了一系列的表單元件，如輸入框、下拉菜單、日曆等，幫助開發者快速構建互動式的表單。常用元件列表如下：

元件(Component)	描述(Description)	備註(Notes)
InputText	用於文本輸入的基本輸入框，支持各種標準的HTML輸入屬性	可以和表單控制項綁定，用於收集用戶輸入
Dropdown	下拉選單，允許用戶從預定義的選項列表中選擇一個選項	支持單選和多選
Calendar	日期選擇器，讓用戶可以方便地選擇日期或日期範圍	支持多種日期格式
AutoComplete	自動完成輸入框，當用戶輸入時提供建議	可以與大型數據集連接
Checkbox	提供勾選框，用於表示選項的選擇狀態	常用於表單中的多選項
RadioButton	單選按鈕，讓用戶在一組選項中選擇一個	用於需要從多個選項中選擇一個的場景
Slider	滑動條，允許用戶選擇一個值或值範圍	可用於設置數值範圍
InputMask	輸入掩碼元件，用於指導用戶輸入特定格式的數據（如電話號碼、社會安全號）	增強數據輸入的一致性和有效性
InputNumber	數字輸入框，用於輸入數字，支持增減按鈕	方便用戶輸入精確的數字值
MultiSelect	多選下拉框，讓用戶從下拉列表中選擇多個選項	常用於需要用戶提供多個選擇的情境
Editor	文本編輯器，提供豐富的文本格式化選項	適合於需要較複雜文本輸入和編輯的場景
FileUpload	文件上傳控件，用於上傳文件	支持拖放、多文件選擇和文件類型過濾

元件使用範例

• InputText：用於接收用戶輸入的文字。

<input type="text" pInputText />

• Dropdown：提供下拉選單供用戶選擇。

<p-dropdown [options]="options"></p-dropdown>

• Calendar：方便用戶選擇日期的日曆元件。

<p-calendar [(ngModel)]="date"></p-calendar>

數據相關元件

• DataTable：用於展示表格數據，支持分頁、篩選和排序等功能。

<p-table [value]="products">
<ng-template pTemplate="header">
    <tr>
    <th>名稱</th>
    <th>價格</th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-product>
    <tr>
    <td>{{product.name}}</td>
    <td>{{product.price}}</td>
    </tr>
</ng-template>
</p-table>

- TreeTable：類似於DataTable，但用於展示具有層次結構的數據。

<p-treeTable [value]="nodes">
<!-- 設定表格列 -->
</p-treeTable>

互動式圖表

PrimeNG提供了各種圖表元件，如條形圖、折線圖和餅圖等。這些圖表是基於Chart.js構建的，支持豐富的客製化選項。

<p-chart type="line" [data]="data"></p-chart>

主題與樣式定制

PrimeNG 提供了一系列內建主題，這些主題能夠幫助開發者快速改變應用程式的外觀與風格。除此之外，PrimeNG 也支持高度自定義，讓開發者能夠創建獨特的主題來符合特定的品牌或設計需求。

內建主題的使用

PrimeNG 的內建主題包括但不限於如下幾種：

• Nova
• Luna
• Rhea
• Arya
• MD Dark
• Bootstrap
• Fluent UI

使用這些主題非常簡單，只需要在你的 Angular 專案中引入相應的 CSS 文件即可。例如，若要使用 Nova Colored 主題，你可以在 angular.json 文件中添加以下代碼：

"styles": [
  "node_modules/primeng/resources/themes/nova-colored/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  // 其他全域樣式
],

或者，你也可以在你的主 styles.css 或 styles.scss 文件中引入：

@import "~primeng/resources/themes/nova-colored/theme.css";
@import "~primeng/resources/primeng.min.css";

自定義主題

如果內建主題無法滿足你的需求，PrimeNG 也提供了強大的自定義功能。你可以透過修改 Less 或 Sass 變數來創建自己的主題。這需要一定的 CSS 預處理器知識。

例如，你可以創建一個新的 Sass 文件（比如 my-theme.scss），並根據需要覆蓋 PrimeNG 的預設變數：

// 引入 PrimeNG 預設變數
@import '~primeng/resources/themes/nova/theme.scss';

// 覆蓋變數
$primaryColor: #007ad9;
$textColor: #555555;
$borderRadius: 3px;

// 引入 PrimeNG 核心樣式
@import '~primeng/resources/primeng.scss';

然後，在你的 angular.json 或 styles.css 中引入這個自定義檔案。這樣，你就能夠使用自己的顏色、字型和其他樣式來定制 PrimeNG 的元件。

錯誤處理

良好的錯誤處理不僅能提升應用的穩定性，還能提供更友好的用戶體驗。在 Angular 中，你可以使用多種方式來處理錯誤：

全局錯誤處理器：通過實現 ErrorHandler 介面，你可以創建一個全局錯誤處理器來捕獲整個應用中的未捕獲異常。

import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
    handleError(error) {
    // 處理錯誤，例如記錄錯誤或顯示錯誤信息給用戶
    console.error('An error occurred:', error.message);
    }
}

// 在 AppModule 中提供這個全局錯誤處理器
@NgModule({
    // ...
    providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }],
})
export class AppModule { }

HTTP 錯誤處理：使用 HTTP 服務進行數據交換時，適當地處理錯誤回應是很重要的。Angular 的 HttpClient 支持攔截器（Interceptors），允許你在請求發送和回應接收的過程中執行特定的邏輯。

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

export class HttpErrorInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
        catchError((error: HttpErrorResponse) => {
        // 處理 HTTP 錯誤
        // 例如，根據錯誤類型顯示錯誤消息
        return throwError(error);
        })
    );
    }
}

效能優化

Lazy Loading：在 Angular 中，Lazy Loading 可以幫助減少應用的初始加載時間，通過按需加載模組來分散加載壓力。例如，在 PrimeNG 的 DataTable 中，使用 Lazy Loading 可以在需要時才加載數據。

// 在路由配置中使用 Lazy Loading
const routes: Routes = [
    {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
    }
];

在 DataTable 中啟用 Lazy Loading：

<p-table [value]="products" [lazy]="true" (onLazyLoad)="loadDataLazy($event)">
    <!-- 列定義 -->
</p-table>

loadDataLazy(event: LazyLoadEvent) {
    // 根據事件參數（如分頁、排序等）從伺服器加載數據
}

變更檢測策略：在 Angular 中，使用 OnPush 變更檢測策略可以提升應用的效能。這種策略會減少 Angular 進行變更檢測的次數，從而提高性能。

import

{ Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
    selector: 'my-component',
    template: `<!-- 模板 -->`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
    // 組件邏輯
}