# @dasch-ng/route-signals 中文文档
规范地址：https://npmcn.com/package/%40dasch-ng/route-signals/
版本：1\.1\.0
npm 元数据更新时间：2026-11-07T10:56:36.964Z
中文译文更新时间：2026-11-13T07:17:03.089Z
软件包许可：未声明
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40dasch-ng/route-signals
原文对照：https://npmcn.com/package/%40dasch-ng/route-signals/?lang=original
项目主页：https://github.com/DaSchTour/dasch-ng#readme
源码仓库：https://github.com/DaSchTour/dasch-ng
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：38.7 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：rxjs ^7\.0\.0，@angular/core ^21\.0\.0 \|\| ^22\.0\.0，@angular/router ^21\.0\.0 \|\| ^22\.0\.0，@dasch-ng/rxjs-operators ^0\.3\.2 \|\| ^0\.4\.0 \|\| ^0\.5\.0
- 首次发布：2025-12-25T13:37:55.706Z
- 最新版本发布：2026-11-07T10:56:36.703Z
- 近 30 天下载量：2135（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）
## 中文简介
[](https://www.npmjs.com/package/@dasch-ng/route-signals)
## 安装
```sh
npm install @dasch-ng/route-signals
```
也可以使用：`pnpm add @dasch-ng/route-signals`、`yarn add @dasch-ng/route-signals`、`bun add @dasch-ng/route-signals`
## README
# @dasch-ng/路由信号
[](https://www.npmjs.com/package/@dasch-ng/route-signals)
以路由参数,查询参数,和路由数据作为信号工作的角功用,再将信号写回查询参数.
## 特征
- 🎯 **类型安全信号** - 获得完整类型脚本支持的路由状态
- 🔄 **自动更新** - 路由改变时更新信号
- 🔐 **URL 解码** - 自动解码URL编码值
- 🛡️ **处理错误** - 错误的URL的安全解码与倒置
- ⚡ **零依赖关系** - 只能靠角和RxJS来
- 📦 **树能震动** - 只导入你需要的东西
## 安装
```bash
npm install @dasch-ng/route-signals
```
## 使用量
### 路线参数
作为信号跟踪 URL 路径参数 :
```typescript
import { Component } from '@angular/core';
import { routeParam } from '@dasch-ng/route-signals';
@Component({
selector: 'app-user-detail',
template: `
User: {{ userId() }}
Group: {{ groupId() }}
`,
})
export class UserDetailComponent {
// Route: /users/:userId/groups/:groupId
readonly userId = routeParam('userId');
readonly groupId = routeParam('groupId');
constructor() {
// URL: /users/john-doe/groups/admin
console.log(this.userId()); // "john-doe"
console.log(this.groupId()); // "admin"
// Automatically decodes URL-encoded values
// URL: /users/john%20doe/groups/team%20alpha
console.log(this.userId()); // "john doe"
console.log(this.groupId()); // "team alpha"
}
}
```
### 查询参数
作为信号跟踪 URL 查询参数 :
```typescript
import { Component } from '@angular/core';
import { routeQueryParam } from '@dasch-ng/route-signals';
@Component({
selector: 'app-search',
template: `
Search: {{ query() }}
Filter: {{ filter() }}
Sort: {{ sort() }}
`,
})
export class SearchComponent {
// URL: /search?q=angular&filter=tutorials&sort=recent
readonly query = routeQueryParam('q');
readonly filter = routeQueryParam('filter');
readonly sort = routeQueryParam('sort');
constructor() {
console.log(this.query()); // "angular"
console.log(this.filter()); // "tutorials"
console.log(this.sort()); // "recent"
// Automatically decodes URL-encoded values
// URL: /search?q=angular%20signals&filter=a%2Fb
console.log(this.query()); // "angular signals"
console.log(this.filter()); // "a/b"
}
}
```
### 路由数据
作为信号的跟踪路由数据属性 :
```typescript
import { Component } from '@angular/core';
import { routeData } from '@dasch-ng/route-signals';
// In route configuration:
const routes = [
{
path: 'admin',
component: AdminComponent,
data: { title: 'Admin Dashboard', role: 'admin' },
},
];
@Component({
selector: 'app-admin',
template: `
{{ title() }}
Required role: {{ role() }}
`,
})
export class AdminComponent {
readonly title = routeData('title');
readonly role = routeData('role');
constructor() {
console.log(this.title()); // "Admin Dashboard"
console.log(this.role()); // "admin"
}
}
```
### 有解析器
路由数据与角解器无缝:
```typescript
import { inject } from '@angular/core';
import { ActivatedRouteSnapshot } from '@angular/router';
import { UserService } from './user.service';
// Resolver
const userResolver = (route: ActivatedRouteSnapshot) => {
const userService = inject(UserService);
const userId = route.paramMap.get('id');
return userService.getUser(userId);
};
// Route configuration
const routes = [
{
path: 'user/:id',
component: UserDetailComponent,
resolve: { user: userResolver },
// Re-run resolver when params change
runGuardsAndResolvers: 'paramsChange',
},
];
// Component
@Component({
selector: 'app-user-detail',
template: `
{{ user().name }}
{{ user().email }}
`,
})
export class UserDetailComponent {
readonly user = routeData('user');
// Signal automatically updates when resolver re-runs
}
```
## API 密码
### `routeParam(key: string): Signal`
创建跟踪 URL 编码路由参数的信号.
- **参数:**
- `key`: 要跟踪的路由参数名称
- **回返情况:** 包含已解码参数值的信号
- **掷出 :** 参数在当前路由中没有时出错
### `routeQueryParam(key: string): Signal`
创建跟踪 URL 编码查询参数的信号.
- **参数:**
- `key`: 要跟踪的查询参数的名称
- **回返情况:** 包含已解码的查询参数值的信号
- **掷出 :** 如果当前路由中没有查询参数, 错误
### `routeData(key: string): Signal`
创建跟踪路径数据属性的信号.
- **类型参数:**
- `T`: 数据属性的类型
- **参数:**
- `key`: 要跟踪的数据属性名称
- **回返情况:** 包含路由数据值的信号
- **掷出 :** 在当前路由中没有数据属性时出错
### `bindQuerySignal(options: BindQuerySignalOptions): void`
写入 a `WritableSignal` 输入查询参数。 此信号在创建时从 URL 设定一次; 之后更改更新 URL( debunted, `replaceUrl`页:1 序列化的值 `defaultValue` 删除参数.
- **选项 :** `signal`, (中文(简体) ), `param`, (中文(简体) ), `defaultValue`选项 `serialize(value) => string | null` 财务报告和审定财务报表 `deserialize(raw) => T`
- URL只在创建时被读取. 与 `routeQueryParam` 以跟踪后向导航.
```typescript
export class AssetListComponent {
readonly search = signal('');
readonly size = signal(null);
constructor() {
bindQuerySignal({ signal: this.search, param: 'q', defaultValue: '' });
bindQuerySignal({
signal: this.size,
param: 'size',
defaultValue: null,
serialize: serializeMinMaxRange,
deserialize: deserializeMinMaxRange,
});
}
}
```
### 查询参数解码器
现成 `serialize`编号 :`deserialize` 用于 `bindQuerySignal`数字 :
- `serializeMinMaxRange` 编号 : `deserializeMinMaxRange`数字 : `{ min: 5, max: 100 }` ⇄ `5-100` (开口: `5-`, (中文(简体) ), `-100`(中文(简体) )
- `serializeDateRange` 编号 : `deserializeDateRange`数字 : `{ start, end }` ⇄ `2026-01-01,2026-02-15` (当地日历日期)
## URL 解码
所有函数使用安全解码器自动解码 URL-编码值:
- 解码标准 URL 编码( 例如 ), `%20` • 空间)
- 处理特殊字符(例如, `%2F` → `/`, (中文(简体) ), `%3D` → `=`(中文(简体) )
- 解码Unicode字符(例如, `%E2%9C%93` → `✓`(中文(简体) )
- 安全处理错误的编码( 日志警告并返回原始字符串)
## 处理错误
如果请求的参数/数据不在路由中, 所有函数都会丢出错误 。 这有助于早期抓取配置错误 :
```typescript
// If route doesn't have an 'id' parameter
const userId = routeParam('id'); // ❌ Throws: "id is not in route."
// If route doesn't have a 'search' query parameter
const search = routeQueryParam('search'); // ❌ Throws: "Query parameter "search" is not in route."
// If route data doesn't have a 'title' property
const title = routeData('title'); // ❌ Throws: "Route data property "title" is not in route."
```
## 所需资源
- 角数 19.0.0以上
- RxJS 7.5.0或以上
## 许可证
麻省理工学院 [丹尼尔·舒巴](https://github.com/DaSchTour)
## 链接
- [文档](https://dasch.ng/libraries/route-signals.html)
- [API 参考](https://dasch.ng/api/@dasch-ng/route-signals/)
- [GitHub 图像](https://github.com/DaSchTour/dasch-ng)
- [问题](https://github.com/DaSchTour/dasch-ng/issues)
## 常见问题
### 如何安装 @dasch-ng/route-signals？
在项目目录运行 npm install @dasch-ng/route-signals，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：rxjs（^7\.0\.0）、@angular/core（^21\.0\.0 \|\| ^22\.0\.0）、@angular/router（^21\.0\.0 \|\| ^22\.0\.0）、@dasch-ng/rxjs-operators（^0\.3\.2 \|\| ^0\.4\.0 \|\| ^0\.5\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @dasch-ng/route-signals 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @dasch-ng/route-signals 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @dasch-ng/route-signals 可以商用吗？
@dasch-ng/route-signals 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。
### @dasch-ng/route-signals 的下载量有多少？
根据 npm 官方下载统计，@dasch-ng/route-signals 在 2026/10/12 – 2026/11/10 这 30 天内被下载 2,135 次，日均约 71 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @dasch-ng/route-signals 还在维护吗？
最新版本 1\.1\.0 发布于 2026/11/07（6 天前）；至今共发布 3 个版本，其中过去 12 个月发布了 3 个；首次发布于 2025/12/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。