# @abgov/angular-components 中文文档
规范地址：https://npmcn.com/package/%40abgov/angular-components/
版本：6\.2\.0
npm 元数据更新时间：2026-10-30T17:56:23.508Z
中文译文更新时间：2026-11-05T22:20:24.261Z
软件包许可：Apache-2\.0
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40abgov/angular-components
原文对照：https://npmcn.com/package/%40abgov/angular-components/?lang=original
项目主页：https://github.com/GovAlta/ui-components#readme
源码仓库：https://github.com/GovAlta/ui-components
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：799 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/core ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0 \|\| ^20\.0\.0 \|\| ^21\.0\.0，@angular/forms ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0 \|\| ^20\.0\.0 \|\| ^21\.0\.0，@angular/common ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0 \|\| ^20\.0\.0 \|\| ^21\.0\.0，@abgov/ui-components-common ^0\.0\.0 \|\| ^3\.0\.0
- 首次发布：2020-08-20T18:24:04.956Z
- 最新版本发布：2026-10-30T17:56:23.320Z
- 近 30 天下载量：12812（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：327（近 12 个月 95 个）
## 中文简介
艾伯塔省政府 -- -- 角的UI组成部分
## 安装
```sh
npm install @abgov/angular-components
```
也可以使用：`pnpm add @abgov/angular-components`、`yarn add @abgov/angular-components`、`bun add @abgov/angular-components`
## README
# 角 UI 组件
[](https://www.npmjs.com/package/@abgov/angular-components)
艾伯塔省政府设计系统网络组件的角包装器.
支持的Angular版本:18,19,20和21.
## 安装
```bash
npm i @abgov/angular-components @abgov/web-components @abgov/ui-components-common
```
## 注册网络组件
在应用程序的入口处, 之前导入一个基本的网络组件 拖曳应用程序 :
```typescript
// src/main.ts
import "@abgov/web-components";
```
保持现有的 `bootstrapApplication` 在此导入后拨打.
## 导入包装组件
角包装是独立的组件. 将每个包装直接导入到 使用它的独立组件:
```typescript
// src/app/app.ts
import { Component } from "@angular/core";
import { GoabButton } from "@abgov/angular-components";
@Component({
selector: "app-root",
standalone: true,
imports: [GoabButton],
template: `Continue`,
})
export class App {}
```
`standalone: true` 明确显示与Angular 18的相容性;这是默认值 在较新的Angular版本中.
对于基于 NgModule 的现有应用程序,请添加每个独立的包装组件 模块的 `imports` 阵列. `AngularComponentsModule` 只有应用程序需要 仍然使用遗产 `goaValue`, (中文(简体) ), `goaValueList`,或 `goaChecked` 构成指令.
## 添加样式
导入组件样式 `src/styles.css`。本样式表包括设计符号和暗主题覆盖:
```css
@import "@abgov/web-components/index.css";
```
## 添加图标
将虹膜添加到 `` 联 合 国 `src/index.html`数字 :
```html
```
见 [开发者设置指南](https://design.alberta.ca/get-started/developers/setup/) 财务报告和审定财务报表 [艾伯塔省政府设计系统](https://design.alberta.ca/) 更多信息.
## 常见问题
### @abgov/angular-components 是什么？
艾伯塔省政府 -- -- 角的UI组成部分
### 如何安装 @abgov/angular-components？
在项目目录运行 npm install @abgov/angular-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0 \|\| ^20\.0\.0 \|\| ^21\.0\.0）、@angular/forms（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0 \|\| ^20\.0\.0 \|\| ^21\.0\.0）、@angular/common（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0 \|\| ^20\.0\.0 \|\| ^21\.0\.0）、@abgov/ui-components-common（^0\.0\.0 \|\| ^3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @abgov/angular-components 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @abgov/angular-components 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @abgov/angular-components 可以商用吗？
@abgov/angular-components 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。
### @abgov/angular-components 的下载量有多少？
根据 npm 官方下载统计，@abgov/angular-components 在 2026/10/05 – 2026/11/03 这 30 天内被下载 12,812 次，日均约 427 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @abgov/angular-components 还在维护吗？
最新版本 6\.2\.0 发布于 2026/10/31（6 天前）；至今共发布 327 个版本，其中过去 12 个月发布了 95 个；首次发布于 2020/08/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。