@ptengine/ui-angular

@ptengine/ui 的 Angular 包装层（standalone components）。 由构建自动生成，不手写 —— src/directives/ 下的文件是 Stencil 的 Angular output target 在 pnpm build 时产出的。

最低支持 Angular 19：output target 1.x 起要求 standalone 组件的现代写法。

安装

npm i @ptengine/ui-angular

样式表

不用手动引：第一个组件连上页面时，会把设计变量（ptengine-ui.css 的内容）自动挂到 document 上。

服务端渲染的项目建议手动引一次，否则 JS 到达之前首屏没有样式、会闪一下。引了的话自动注入会跳过。 放在 angular.json 的 styles 里，并把 @ptengine/ui 装成直接依赖（npm i @ptengine/ui，pnpm 下间接依赖找不到）：

"styles": ["node_modules/@ptengine/ui/dist/ptengine-ui/ptengine-ui.css", "src/styles.css"]

用法

import { PtButton, PtInput, TextValueAccessor } from '@ptengine/ui-angular';

@Component({
  standalone: true,
  imports: [FormsModule, PtButton, PtInput, TextValueAccessor],
  template: `
    <pt-input [(ngModel)]="value" name="q"></pt-input>
    <pt-button variant="brand" (click)="submit()">提交</pt-button>
  `
})
export class FormComponent {
  value = '';
}

事件转成 Angular 的 Output：(ptChange)、(ptClose)。

[!WARNING] 别忘了 value accessor。 standalone 组件必须在 imports 里显式带上用到的 accessor， 否则 ngModel 找不到 accessor， 整棵变更检测会在第一次渲染就抛异常 —— 症状是「所有绑定都不更新」， 很容易误判成组件本身坏了。

| accessor | 绑定的属性 | 覆盖的元素 | | ---------------------- | ---------- | ------------------------------------------------------------------------------------------------- | | TextValueAccessor | value | input、textarea、select、radio-group、tabs、accordion、menu-group、toggle-group、slider、calendar | | BooleanValueAccessor | checked | checkbox、switch | | PressedValueAccessor | pressed | toggle | | OpenValueAccessor | open | collapsible |

响应式表单同样可用：

imports: [ReactiveFormsModule, PtInput, TextValueAccessor];

<pt-input [formControl]="keyword"></pt-input>

轻提示（toast）

命令式的 toast() 从 @ptengine/ui/toast 导入。 <pt-toaster>（imports 里带上 PtToaster）挂在根组件末尾一次即可；不挂也能用， toast() 会在 <body> 末尾建一个：

import { PtToaster } from '@ptengine/ui-angular';
import { toast } from '@ptengine/ui/toast';

// 根组件模板里：<pt-toaster position="top-center" rich-colors></pt-toaster>
toast.success('已保存');

action.onClick / onDismiss / onAutoClose 这些回调由 toaster 自己的点击与计时触发，而包装层让组件在 NgZone 之外渲染，回调也就跑在 zone 外：里面改组件状态要包一层 ngZone.run(() => …)，否则界面要等下一次 别的变更检测才刷新。

版本

与 @ptengine/ui 锁步发版、共用一个版本号。