mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-06-11 02:33:10 +08:00
174e31b3fc
Translated 85 skill sub-reference files to achieve full parity with the English source: - skills/angular-developer/references/ — 35 files (all references) - skills/remotion-video-creation/rules/ — 28 files (all rules) - skills/tinystruct-patterns/references/ — 5 files - skills/openclaw-persona-forge/references/ — 6 files - skills/skill-comply/prompts/ — 3 files - skills/lead-intelligence/agents/ — 4 files - skills/brand-voice/references/ — 1 file - skills/frontend-slides/ — 2 files - hooks/memory-persistence/README.md — 1 file English source parity: 0 missing files (excluding rules/zh/, internal docs, and experimental examples absent from zh-CN)
70 lines
2.0 KiB
Markdown
70 lines
2.0 KiB
Markdown
# データリゾルバー
|
|
|
|
データリゾルバーはルートがアクティブになる前にデータをフェッチし、コンポーネントがレンダリング時に必要なデータを持っていることを保証します。
|
|
|
|
## リゾルバーの作成
|
|
|
|
`ResolveFn` 型を実装します。
|
|
|
|
```ts
|
|
export const userResolver: ResolveFn<User> = (route, state) => {
|
|
const userService = inject(UserService);
|
|
const id = route.paramMap.get('id')!;
|
|
return userService.getUser(id);
|
|
};
|
|
```
|
|
|
|
## ルートの設定
|
|
|
|
`resolve` キーの下にリゾルバーを追加します。
|
|
|
|
```ts
|
|
{
|
|
path: 'user/:id',
|
|
component: UserProfile,
|
|
resolve: {
|
|
user: userResolver
|
|
}
|
|
}
|
|
```
|
|
|
|
## 解決されたデータへのアクセス
|
|
|
|
### 1. `ActivatedRoute` 経由（従来の方法）
|
|
|
|
```ts
|
|
private route = inject(ActivatedRoute);
|
|
data = toSignal(this.route.data);
|
|
user = computed(() => this.data().user);
|
|
```
|
|
|
|
### 2. コンポーネント入力経由（モダンな方法）
|
|
|
|
`provideRouter` で `withComponentInputBinding()` を有効にすると、解決されたデータを `@Input` または `input()` に直接渡せます。
|
|
|
|
```ts
|
|
// app.config.ts
|
|
provideRouter(routes, withComponentInputBinding());
|
|
|
|
// component.ts
|
|
user = input.required<User>();
|
|
```
|
|
|
|
## エラーハンドリング
|
|
|
|
リゾルバーが失敗するとナビゲーションがブロックされます。
|
|
|
|
- グローバルな処理には `withNavigationErrorHandler` を使用します。
|
|
- リゾルバー内で `catchError` を使用して `RedirectCommand` やフォールバックデータを返します。
|
|
|
|
```ts
|
|
return userService
|
|
.get(id)
|
|
.pipe(catchError(() => of(new RedirectCommand(router.parseUrl('/error')))));
|
|
```
|
|
|
|
## ベストプラクティス
|
|
|
|
- **軽量に保つ**：重要なデータのみをフェッチします。
|
|
- **フィードバックを提供する**：リゾルバーが完了するまで UI は古いページに留まるため、ナビゲーション中にグローバルなローディングバーを表示するためにルーターイベントをリッスンします。
|