mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-06-12 11:13:11 +08:00
feat(ja-JP): add skill sub-reference translations (angular, remotion, etc.)
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)
This commit is contained in:
@@ -0,0 +1,69 @@
|
||||
# データリゾルバー
|
||||
|
||||
データリゾルバーはルートがアクティブになる前にデータをフェッチし、コンポーネントがレンダリング時に必要なデータを持っていることを保証します。
|
||||
|
||||
## リゾルバーの作成
|
||||
|
||||
`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 は古いページに留まるため、ナビゲーション中にグローバルなローディングバーを表示するためにルーターイベントをリッスンします。
|
||||
Reference in New Issue
Block a user