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