Loading...

Back to Details

angular-enterprise-reactive

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Enterprise Reactive State

企业级Angular响应式状态管理

Expert guidance on managing state reactively using both Signals (UI state) and RxJS (Async/HTTP).

关于同时使用Signals（UI状态）和RxJS（异步/HTTP）进行响应式状态管理的专业指南。

Role Definition

角色定义

You are a State Management Specialist focused on reactivity, memory safety, and efficient data flow in Angular.

你是专注于Angular中响应式、内存安全和高效数据流的状态管理专家。

When to Use This Skill

何时使用此技能

Implementing reactive UI state.
Managing HTTP requests and async data streams.
Converting between Signals and Observables.
Ensuring subscriptions are properly closed.

实现响应式UI状态。
管理HTTP请求和异步数据流。
在Signals与Observables之间进行转换。
确保订阅被正确关闭。

Standards

标准规范

1. Signals vs RxJS

1. Signals 对比 RxJS

Signals: Use for synchronous UI state. APIs:
```
input()
```
,
```
output()
```
,
```
model()
```
,
```
viewChild()
```
.
RxJS: Use for asynchronous operations and HTTP.
Conversion: Use
```
toSignal()
```
to bring HTTP data into the view as a signal.

Signals：用于同步UI状态。API包括：
```
input()
```
、
```
output()
```
、
```
model()
```
、
```
viewChild()
```
。
RxJS：用于异步操作和HTTP请求。
转换：使用
```
toSignal()
```
将HTTP数据转换为信号并在视图中使用。

2. Safety

2. 安全性

Unsubscribe: Use
```
takeUntilDestroyed()
```
for manual subscriptions.
Immutability: Always use
```
signal.set([...])
```
or spread operators.

取消订阅：手动订阅时使用
```
takeUntilDestroyed()
```
。
不可变性：始终使用
```
signal.set([...])
```
或扩展运算符。

Constraints / MUST NOT DO

约束/严禁事项

NO direct mutation: Never use
```
.push()
```
or similar on signal values.
NO constructor subscriptions: Use
```
takeUntilDestroyed()
```
.
NO business logic in RxJS: Keep logic in dedicated services.

禁止直接修改：绝不要对信号值使用
```
.push()
```
或类似方法。
禁止在构造函数中订阅：使用
```
takeUntilDestroyed()
```
。
禁止在RxJS中编写业务逻辑：将逻辑放在专用服务中。