Angular 教學
Angular 20 獨立元件 — signal 輸入、OnPush 變更偵測、內嵌範本、零 NgModules、零 CSS。
你會建立啲乜
一個細細個嘅聯絡表單 — 有標籤嘅輸入欄、提交按鈕、雙向綁定、真實嘅鍵盤同螢幕閱讀器行為 — 先裸奔,再加樣式,大約 10 分鐘。
開始之前
你需要 git、Node 22 或以上,同 pnpm 10 或以上。任何 Angular 20 項目都得 — Angular CLI 或者 Analog。
步驟 1 — 攞到程式碼
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-angular-headless
pnpm install
pnpm test # vitest + TestBed, all 571 components
pnpm run build-storybook
元件係平放嘅檔案,位於 components/ —
Button.ts, TextInput.ts — 每個都係附內嵌範本嘅獨立元件,另加佢嘅 spec 同 story。Barrel
index.ts 重新匯出每個元件; pnpm build
透過 ng-packagr 產生 Angular Package Format 套件。
步驟 2 — 你第一個元件
import { Component } from "@angular/core";
import { Button } from "@lilydesignsystem/angular-headless";
@Component({
selector: "app-save-bar",
standalone: true,
imports: [Button],
template: `<lily-button (click)="save()">Save</lily-button>`,
})
export class SaveBar {
save() { console.log("saved"); }
}
每個元件都會宣告一個 lily-* 選擇器,並以佢嘅類別掛鉤渲染語義元素 —
<button class="button" type="button"> 喺度。輸入係基於 signal 嘅: label() 用於 aria-label
覆蓋, className() 用嚟附加類別。
步驟 3 — 組合一個細表單
import { Component, signal } from "@angular/core";
import { Form, Field, TextInput, Button } from "@lilydesignsystem/angular-headless";
@Component({
selector: "app-contact-form",
standalone: true,
imports: [Form, Field, TextInput, Button],
template: `
<lily-form label="Contact form" (submit)="handleSubmit($event)">
<lily-field label="Full name" [required]="true">
<lily-text-input id="name" label="Full name" [(value)]="name" />
</lily-field>
<lily-button type="submit">Save</lily-button>
</lily-form>
`,
})
export class ContactForm {
name = signal("");
}
lily-field 將可見標籤當作佢自己嘅
label 輸入,而唔係嵌套嘅標籤元件 — 喺欄位上傳入一次,而相應嘅 lily-text-input喺
label 提供無障礙名稱。類似輸入嘅元件會公開 model() 值,所以 banana-box [(value)]
雙向綁定即刻運作 — 全程相容 zoneless。
2026-08-29 已驗證: 較早嘅草稿喺 Label 入面嵌套咗一個獨立嘅 lily-field元件,令佢渲染咗 兩個 標籤(其中一個係空嘅),因為
lily-field 已經由
label 輸入渲染咗自己嘅 — 檢查元件原始碼先發現。
組合聯絡表單路由
係同一個模式,由真實嘅 e2e 同 axe 測試驗證過。
檢查你嘅成果: 運行應用程式,表單睇落好簡單 — 正如預期:樣式仲喺前面。按 Tab:焦點會移過每個控制項,標籤會被讀出,提交都運作。行為已經完成;外觀屬於你,而且係下一步。
步驟 4 — 加樣式
為類別掛鉤加樣式 — .button, .text-input,
.label, .field — 喺 styles.css,或者將現成主題加入 styles 陣列,位於
angular.json / 喺 index.html:
<link rel="stylesheet" href="/themes/adobe-spectrum.css" />步驟 5 — 睇晒佢運作
Angular + Analog 範例應用程式 以檔案式路由同 Vite 展示完整目錄:
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-angular-examples
pnpm install && pnpm run dev