單位轉換器是用於在不同單位之間轉換測量值的便利工具，可以更輕鬆地使用各種測量系統。在本教程中，我們將在 Angular 中建立一個單位轉換器應用程序，允許使用者在不同長度單位（例如米、公里、厘米和毫米）之間轉換值。我們將實現轉換邏輯並使用 Tailwind CSS 進行樣式設計，以創建一個具有視覺吸引力且用戶友好的介面。
單位轉換器應用程式提供了一個有用的工具，用於在不同單位之間轉換測量值，從而更輕鬆地使用各種測量系統。在此項目中，我們將重點關注長度單位，允許使用者在米、公里、公分和毫米之間轉換值。該應用程式將具有簡單直覺的介面，使用戶能夠輸入一個值，選擇要轉換的單位，並立即查看轉換後的結果。
先建立一個新的 Angular 專案。如果您尚未設定 Angular CLI，請使用以下命令安裝它：
npm install -g @angular/cli
接下來，建立一個新的 Angular 專案：
ng new unit-converter-app cd unit-converter-app
專案建置完成後，安裝Tailwind CSS：
npm install -D tailwindcss npx tailwindcss init
透過更新 tailwind.config.js 檔案來設定 Tailwind CSS：
module.exports = {
content: ["./src/**/*.{html,ts}"],
theme: {
extend: {},
},
plugins: [],
}
在 src/styles.css 中包含 Tailwind 的基礎、元件和實用程式：
@tailwind base; @tailwind components; @tailwind utilities;
在app.component.ts中，定義單位之間的轉換邏輯：
import { Component, inject, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { Meta } from '@angular/platform-browser';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
})
export class AppComponent {
units = signal(['Meter', 'Kilometer', 'Centimeter', 'Millimeter']);
inputValue = signal(0);
fromUnit = signal('Meter');
toUnit = signal('Meter');
result = signal<number | null>(null);
errorMessage = signal<string | null>(null);
meta = inject(Meta);
constructor() {
this.meta.addTag({
name: 'viewport',
content: 'width=device-width, initial-scale=1',
});
this.meta.addTag({
rel: 'icon',
type: 'image/x-icon',
href: 'favicon.ico',
});
this.meta.addTag({
rel: 'canonical',
href: 'https://unit-converter-app-manthanank.vercel.app/',
});
this.meta.addTag({ property: 'og:title', content: 'Unit Converter App' });
this.meta.addTag({ name: 'author', content: 'Manthan Ankolekar' });
this.meta.addTag({ name: 'keywords', content: 'angular' });
this.meta.addTag({ name: 'robots', content: 'index, follow' });
this.meta.addTag({
property: 'og:description',
content:
'A simple unit converter app built using Angular that converts units like meter, kilometer, and more.',
});
this.meta.addTag({
property: 'og:image',
content: 'https://unit-converter-app-manthanank.vercel.app/image.jpg',
});
this.meta.addTag({
property: 'og:url',
content: 'https://unit-converter-app-manthanank.vercel.app/',
});
}
convert() {
if (!this.validateInput()) {
return;
}
const conversionRates: { [key: string]: number } = {
Meter: 1,
Kilometer: 0.001,
Centimeter: 100,
Millimeter: 1000,
};
const fromRate = conversionRates[this.fromUnit()];
const toRate = conversionRates[this.toUnit()];
this.result.set((this.inputValue() * fromRate) / toRate);
}
reset() {
this.inputValue.set(0);
this.fromUnit.set('Meter');
this.toUnit.set('Meter');
this.result.set(null);
this.errorMessage.set(null);
}
swapUnits() {
const temp = this.fromUnit();
this.fromUnit.set(this.toUnit());
this.toUnit.set(temp);
}
validateInput(): boolean {
if (this.inputValue() < 0) {
this.errorMessage.set('Input value cannot be negative.');
return false;
}
this.errorMessage.set(null);
return true;
}
}
此程式碼設定基本轉換邏輯，處理使用者輸入以轉換長度單位。
現在，讓我們在 app.component.html 中使用 Tailwind CSS 設計介面：
<div class="min-h-screen flex items-center justify-center bg-gray-100">
<div class="p-6 max-w-3xl mx-auto bg-white rounded-xl shadow-md space-y-4">
<h2 class="text-2xl font-bold text-center">Unit Converter</h2>
<div class="space-y-2">
<label for="inputValue" class="block text-sm font-medium text-gray-700">Input Value:</label>
<input type="number" id="inputValue" [(ngModel)]="inputValue"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
<div class="space-y-2">
<label for="fromUnit" class="block text-sm font-medium text-gray-700">From:</label>
<select id="fromUnit" [(ngModel)]="fromUnit"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
@for (unit of units(); track $index) {
<option [value]="unit">{{ unit }}</option>
}
</select>
</div>
<div class="space-y-2">
<label for="toUnit" class="block text-sm font-medium text-gray-700">To:</label>
<select id="toUnit" [(ngModel)]="toUnit"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
@for (unit of units(); track $index) {
@if (unit !== fromUnit()) {
<option [value]="unit">{{ unit }}</option>
}
}
</select>
</div>
<div class="flex space-x-2">
<button (click)="convert()"
class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Convert</button>
<button (click)="reset()"
class="w-full bg-gray-600 text-white py-2 px-4 rounded-md shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Reset</button>
<button (click)="swapUnits()"
class="w-full bg-yellow-600 text-white py-2 px-4 rounded-md shadow-sm hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500">Swap</button>
</div>
@if (errorMessage()){
<div class="text-red-500 text-center mt-4">{{ errorMessage() }}</div>
}
@if (result() !== null) {
<h3 class="text-xl font-semibold text-center mt-4">Result: {{result()}}</h3>
}
</div>
</div>
設計使用 Tailwind CSS 類別來建立一個簡單、響應式的 UI，可以在不同裝置上無縫調整。
運行您的應用程式：
ng serve
導航至 http://localhost:4200/ 以查看正在執行的單位轉換器應用程式。您可以輸入一個值，從下拉式選單中選擇單位，然後按一下「轉換」即可立即查看結果。
恭喜！您已使用 Tailwind CSS 進行樣式化，在 Angular 中成功建立了一個單位轉換器應用程式。該專案演示瞭如何創建一個實用且具有視覺吸引力的 Web 應用程序，該應用程式為轉換長度單位提供了有價值的工具。您可以透過添加更多單元選項、改進設計或實現附加功能來進一步增強應用程式。
編碼愉快！
請隨意依需求自訂內容。如果您有任何疑問或需要進一步協助，請告訴我。祝你的專案好運！ ？
存取 GitHub 儲存庫以詳細探索程式碼。
以上是使用 Tailwind CSS 在 Angular 中建立單位轉換器應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
