Angular 教程
Angular 20 独立组件——signal 输入、OnPush 变更检测、内联模板、零 NgModule、零 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——每个都是带内联模板的独立组件，另有它的测试规范和 story。入口文件
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 输入，而不是嵌套一个标签组件——只需在 field 上传入一次，lily-text-input 对应的
label 就会提供可访问名称。类输入组件暴露 model() 值，所以“香蕉盒”写法 [(value)]
的双向绑定开箱即用——全程兼容 zoneless。
2026-08-29 已验证：早期草稿在 lily-field 里嵌套了单独的 Label 组件，结果渲染出两个标签（其中一个为空），因为
lily-field 已经会根据 label 输入渲染自己的标签——这是通过检查组件源码发现的。
联系表单组合路由
采用同样的模式，并经过真实的端到端测试和 axe 测试。
检查你的成果：运行应用，表单看起来很朴素——这正是预期：样式还在后面。按下 Tab：焦点会依次经过每个控件，标签会被朗读，提交也能正常工作。行为已经完成；外观由你决定，这就是下一步。
第 4 步——添加样式
在 styles.css 中为这些类名钩子设置样式——.button、.text-input、
.label、.field——或者把一个现成的主题加入 angular.json 的
styles 数组，或在 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