Skip to content

Commit 5421ba1

Browse files
authored
feat: translate router guides in v20 (#1027)
1 parent 1ef24d8 commit 5421ba1

File tree

9 files changed

+759
-136
lines changed

9 files changed

+759
-136
lines changed

adev-ja/src/app/sub-navigation-data.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -337,22 +337,22 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
337337
contentPath: 'guide/routing/define-routes',
338338
},
339339
{
340-
label: 'Show routes with Outlets',
340+
label: 'アウトレットにルートを表示する',
341341
path: 'guide/routing/show-routes-with-outlets',
342342
contentPath: 'guide/routing/show-routes-with-outlets',
343343
},
344344
{
345-
label: 'Navigate to routes',
345+
label: 'ルートへのナビゲーション',
346346
path: 'guide/routing/navigate-to-routes',
347347
contentPath: 'guide/routing/navigate-to-routes',
348348
},
349349
{
350-
label: 'Read route state',
350+
label: 'ルートの状態を読み取る',
351351
path: 'guide/routing/read-route-state',
352352
contentPath: 'guide/routing/read-route-state',
353353
},
354354
{
355-
label: 'Other routing tasks',
355+
label: 'その他のルーティングタスク',
356356
path: 'guide/routing/common-router-tasks',
357357
contentPath: 'guide/routing/common-router-tasks',
358358
},

adev-ja/src/content/guide/routing/common-router-tasks.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# Other common Routing Tasks
1+
# その他の一般的なルーティングタスク
22

3-
This guide covers some other common tasks associated with using Angular router in your application.
3+
このガイドでは、アプリケーションでAngularルーターを使用する際によくあるその他のタスクについて説明します。
44

55
## ルート情報の取得
66

@@ -13,7 +13,7 @@ This guide covers some other common tasks associated with using Angular router i
1313
ルートを使用して、このタイプの情報をアプリケーションコンポーネントに渡します。
1414
これを行うには、`provideRouter` を使用した [withComponentInputBinding](api/router/withComponentInputBinding) 機能、または `RouterModule.forRoot``bindToComponentInputs` オプションを使用します。
1515

16-
ルートから情報を入手するには:
16+
ルートから情報を取得するには:
1717

1818
<docs-workflow>
1919

@@ -31,22 +31,22 @@ providers: [
3131

3232
<docs-step title="コンポーネントに `Input` を追加する">
3333

34-
パラメータの名前と一致する `input()` プロパティを持つようにコンポーネントを更新します。
34+
パラメータ名と一致する `input()` プロパティを持つようにコンポーネントを更新します。
3535

3636
```ts
3737
id = input.required<string>()
3838
hero = computed(() => this.service.getHero(heroId));
3939
```
4040

41-
NOTE: すべてのルートデータを、キーと値のペアでコンポーネントの入力にバインドできます。静的なルートデータ、解決されたルートデータ、パスパラメータ、マトリックスパラメータ、クエリパラメータです
41+
NOTE: 静的なルートデータ、解決されたルートデータ、パスパラメータ、マトリックスパラメータ、クエリパラメータなど、すべてのルートデータをキーと値のペアでコンポーネントの入力にバインドできます
4242
親コンポーネントのルート情報を使用する場合は、ルーターの `paramsInheritanceStrategy` オプションを設定する必要があります。
4343
`withRouterConfig({paramsInheritanceStrategy: 'always'})`
4444

4545
</docs-step>
4646

4747
</docs-workflow>
4848

49-
## 404 ページの表示
49+
## 404 ページの表示 {#displaying-a-404-page}
5050

5151
404ページを表示するには、[ワイルドカードルート](guide/routing/common-router-tasks#setting-up-wildcard-routes) を設定します。このルートの `component` プロパティは、404ページに使用したいコンポーネントに設定します。
5252

@@ -59,9 +59,9 @@ const routes: Routes = [
5959
```
6060

6161
`path``**` の最後のルートは、ワイルドカードルートです。
62-
ルーターは、要求されたURLがリストの先頭にあるパスと一致しない場合、このルートを選択し、ユーザーを `PageNotFoundComponent` に送信します
62+
ルーターは、要求されたURLがリストの先頭にあるパスと一致しない場合、このルートを選択し、ユーザーを `PageNotFoundComponent` にルーティングします
6363

64-
## 権限のないアクセスの防止
64+
## 権限のないアクセスの防止 {#preventing-unauthorized-access}
6565

6666
ルートガードを使用して、ユーザーが権限なしでアプリケーションの特定の部分にナビゲートできないようにします。
6767
Angularでは、次のルートガードを使用できます。
@@ -96,7 +96,7 @@ export const yourGuardFunction: CanActivateFn = (
9696
```
9797

9898
ルーティングモジュールで、`routes` 構成の適切なプロパティを使用します。
99-
ここでは、`canActivate` は、ルーターに、この特定のルートへのナビゲーションを仲介するよう指示します
99+
ここでは、`canActivate` は、ルーターに、この特定のルートへのナビゲーションを制御するよう指示します
100100

101101
```ts
102102
{
@@ -187,7 +187,7 @@ export class AppComponent {}
187187
ルーターが新しいコンポーネントビューにナビゲートすると、ブラウザの場所と履歴が、そのビューのURLで更新されます。
188188

189189
最新のHTML5ブラウザは、[history.pushState](https://developer.mozilla.org/docs/Web/API/History_API/Working_with_the_History_API#adding_and_modifying_history_entries 'HTML5 browser history push-state') をサポートしています。これは、サーバーページのリクエストをトリガーせずに、ブラウザの場所と履歴を変更するテクニックです。
190-
ルーターは、ページロードが必要な場合と区別できない「自然な」URLを作成できます。
190+
ルーターは、サーバーページロードと区別できない「自然な」URLを作成できます。
191191

192192
この「HTML5 pushState」スタイルの危機センターのURLを示します。
193193

@@ -208,7 +208,7 @@ localhost:3002/src/#/crisis-center
208208
| プロバイダー | 詳細 |
209209
| :--------------------- | :----------------------------------- |
210210
| `PathLocationStrategy` | デフォルトの「HTML5 pushState」スタイル。 |
211-
| `HashLocationStrategy` |ハッシュ URL」スタイル。 |
211+
| `HashLocationStrategy` |ハッシュURL」スタイル。 |
212212

213213
`RouterModule.forRoot()` 関数は、`LocationStrategy``PathLocationStrategy` に設定します。これにより、デフォルトの戦略になります。
214214
ブートストラッププロセス中にオーバーライドを使用して、`HashLocationStrategy` に切り替えることもできます。
Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
# Navigate to routes
2+
3+
The RouterLink directive is Angular's declarative approach to navigation. It allows you to use standard anchor elements (`<a>`) that seamlessly integrate with Angular's routing system.
4+
5+
## How to use RouterLink
6+
7+
Instead of using regular anchor elements `<a>` with an `href` attribute, you add a RouterLink directive with the appropriate path in order to leverage Angular routing.
8+
9+
```angular-html
10+
<nav>
11+
<a routerLink="/user-profile">User profile</a>
12+
<a routerLink="/settings">Settings</a>
13+
</nav>
14+
```
15+
16+
### Using absolute or relative links
17+
18+
**Relative URLs** in Angular routing allow you to define navigation paths relative to the current route's location. This is in contrast to **absolute URLs** which contain the full path with the protocol (e.g., `http://`) and the **root domain** (e.g., `google.com`).
19+
20+
```angular-html
21+
<!-- Absolute URL -->
22+
<a href="https://www.angular.dev/essentials">Angular Essentials Guide</a>
23+
24+
<!-- Relative URL -->
25+
<a href="/essentials">Angular Essentials Guide</a>
26+
```
27+
28+
In this example, the first example contains the full path with the protocol (i.e., `https://`) and the root domain (i.e., `angular.dev`) explicitly defined for the essentials page. In contrast, the second example assumes the user is already on the correct root domain for `/essentials`.
29+
30+
Generally speaking, relative URLs are preferred because they are more maintainable across applications because they don’t need to know their absolute position within the routing hierarchy.
31+
32+
### How relative URLs work
33+
34+
Angular routing has two syntaxes for defining relative URLs: strings and arrays.
35+
36+
```angular-html
37+
<!-- Navigates user to /dashboard -->
38+
<a routerLink="dashboard">Dashboard</a>
39+
<a [routerLink]="['dashboard']">Dashboard</a>
40+
```
41+
42+
HELPFUL: Passing a string is the most common way to define relative URLs.
43+
44+
When you need to define dynamic parameters in a relative URL, use the array syntax:
45+
46+
```angular-html
47+
<a [routerLink]="['user', currentUserId]">Current User</a>
48+
```
49+
50+
In addition, Angular routing allows you specify whether you want the path to be relative to the current URL or to the root domain based on whether the relative path is prefixed with a forward slash (`/`) or not.
51+
52+
For example, if the user is on `example.com/settings`, here is how different relative paths can be defined for various scenarios:
53+
54+
```angular-html
55+
<!-- Navigates to /settings/notifications -->
56+
<a routerLink="notifications">Notifications</a>
57+
<a routerLink="/settings/notifications">Notifications</a>
58+
59+
<!-- Navigates to /team/:teamId/user/:userId -->
60+
<a routerLink="/team/123/user/456">User 456</a>
61+
<a [routerLink]="['/team', teamId, 'user', userId]">Current User</a>”
62+
```
63+
64+
## Programmatic navigation to routes
65+
66+
While `RouterLink` handles declarative navigation in templates, Angular provides programmatic navigation for scenarios where you need to navigate based on logic, user actions, or application state. By injecting `Router`, you can dynamically navigate to routes, pass parameters, and control navigation behavior in your TypeScript code.
67+
68+
### `router.navigate()`
69+
70+
You can use the `router.navigate()` method to programmatically navigate between routes by specifying a URL path array.
71+
72+
```angular-ts
73+
import { Router } from '@angular/router';
74+
75+
@Component({
76+
selector: 'app-dashboard',
77+
template: `
78+
<button (click)="navigateToProfile()">View Profile</button>
79+
`
80+
})
81+
export class AppDashboard {
82+
private router = inject(Router);
83+
84+
navigateToProfile() {
85+
// Standard navigation
86+
this.router.navigate(['/profile']);
87+
88+
// With route parameters
89+
this.router.navigate(['/users', userId]);
90+
91+
// With query parameters
92+
this.router.navigate(['/search'], {
93+
queryParams: { category: 'books', sort: 'price' }
94+
});
95+
}
96+
}
97+
```
98+
99+
`router.navigate()` supports both simple and complex routing scenarios, allowing you to pass route parameters, [query parameters](/guide/routing/read-route-state#query-parameters), and control navigation behavior.
100+
101+
You can also build dynamic navigation paths relative to your component’s location in the routing tree using the `relativeTo` option.
102+
103+
```angular-ts
104+
import { Router, ActivatedRoute } from '@angular/router';
105+
106+
@Component({
107+
selector: 'app-user-detail',
108+
template: `
109+
<button (click)="navigateToEdit()">Edit User</button>
110+
<button (click)="navigateToParent()">Back to List</button>
111+
`
112+
})
113+
export class UserDetailComponent {
114+
private route = inject(ActivatedRoute);
115+
private router = inject(Router);
116+
117+
constructor() {}
118+
119+
// Navigate to a sibling route
120+
navigateToEdit() {
121+
// From: /users/123
122+
// To: /users/123/edit
123+
this.router.navigate(['edit'], { relativeTo: this.route });
124+
}
125+
126+
// Navigate to parent
127+
navigateToParent() {
128+
// From: /users/123
129+
// To: /users
130+
this.router.navigate(['..'], { relativeTo: this.route });
131+
}
132+
}
133+
```
134+
135+
### `router.navigateByUrl()`
136+
137+
The `router.navigateByUrl()` method provides a direct way to programmatically navigate using URL path strings rather than array segments. This method is ideal when you have a full URL path and need to perform absolute navigation, especially when working with externally provided URLs or deep linking scenarios.
138+
139+
```angular-ts
140+
// Standard route navigation
141+
router.navigateByUrl('/products);
142+
143+
// Navigate to nested route
144+
router.navigateByUrl('/products/featured');
145+
146+
// Complete URL with parameters and fragment
147+
router.navigateByUrl('/products/123?view=details#reviews');
148+
149+
// Navigate with query parameters
150+
router.navigateByUrl('/search?category=books&sortBy=price');
151+
```
152+
153+
In the event you need to replace the current URL in history, `navigateByUrl` also accepts a configuration object that has a `replaceUrl` option.
154+
155+
```angular-ts
156+
// Replace current URL in history
157+
router.navigateByUrl('/checkout', {
158+
replaceUrl: true
159+
});
160+
```
161+
162+
## Next steps
163+
164+
Learn how to [read route state](/guide/routing/read-route-state) to create responsive and context-aware components.

0 commit comments

Comments
 (0)