ホームページ > 記事 > ウェブフロントエンド > Angular 学習ルーティングの簡単な分析
この記事では、Angular でのルーティングを理解し、ルーティングの基本的な使用法を紹介し、パラメーターを受け取る方法を説明します。皆様のお役に立てれば幸いです。
環境:
Angular CLI: 11.0.6
角度: 11.0.7
ノード: 12.18.3
npm : 6.14.6
IDE: Visual Studio Code
簡単に言えば、アドレス バーでは、さまざまなアドレス (URL) が対応しています。別のページへ、これはルーティングです。また、ブラウザの「進む」ボタンと「戻る」ボタンをクリックすると、ブラウザはルーティングに基づいて閲覧履歴を前後に移動します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
Angular では、Router は独立したモジュールであり、@angular/router モジュールで定義されています。
2.1. 準備
まず 2 つのページを作成しますルーティングの使用法を説明するには、次のようにします。ng g c page1 ng g c page2上記の AnuglarCLI コマンドを使用して、Page1Component と Page2Component という 2 つのコンポーネントを作成します。
2.2. ルートの登録
//src\app\app-routing.module.ts const routes: Routes = [ { path: 'page1', component: Page1Component }, { path: 'page2', component: Page2Component }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule {}ご覧のとおり、単純なルート登録では、ルートを定義するためにパスとコンポーネントの 2 つの属性のみが必要です。このルートの相対パスと応答コンポーネント。
2.3. html での使用法
<a routerLink="page1">Page1</a> | <a routerLink="page2">Page2</a>HTML テンプレートでは、routerLink 属性を直接使用して angular ルートを識別します。コードを実行すると、Page1 と Page2 の 2 つのハイパーリンクが表示されます。クリックすると、アドレス バーのアドレスが http://localhost:4200/page2 または http://localhost:4200/page1 に変更されることがわかります。ページのコンテンツは次のとおりです。 page1 と page2 の切り替え
2.4. ts コードでの使用法
ts のビジネス ロジックに基づいてジャンプする必要がある場合があります。 。 ts では、constructor(private router: Router) {}ジャンプ コード:
// 跳转到 /page1 this.router.navigate(['/page1']); // 跳转到 /page1/123 this.router.navigate(['/page1', 123]);
# 3.1 . パスのパラメータ 一般的に言えば、ID が 1 のユーザーを表す /users/1 などの URL 内のセグメントとしてパラメータを使用します。ルートは「/users /id」スタイルとして定義されます。
たとえば、単純なページの場合、page1 ページは id パラメーターを渡すことができるため、ルーティングを次のように変更する必要があります。
const routes: Routes = [ { path: 'page1/:id', //接收id参数 component: Page1Component, }, { // 实现可选参数的小技巧。 这个routing处理没有参数的url path: 'page1', redirectTo: 'page1/', // 跳转到'page1/:id' }, { path: 'page2', component: Page2Component, }, ];
tsコードがパラメーターを読み取るとき、最初に注入する必要があります。 ActivatedRoute、コードは次のとおりです:
constructor(private activatedRoute: ActivatedRoute) {} ngOnInit(): void { this.activatedRoute.paramMap.subscribe((params) => { console.log('Parameter id: ', params.get('id')); // 地址 http://localhost:4200/page1/33 // 控制台输出:Query Parameter name: 33 // 地址 http://localhost:4200/page1/ // 控制台输出:Query Parameter name: (实际结果为undefined) }); }
3.2. パラメータ (QueryParameter) のパラメータパラメータを記述する別の方法があります。 http:// localhost:4200/?name=cat など、URL アドレスの後に疑問符「?」を追加し、パラメータ名とパラメータ値 (「name=cat」) を追加します。これをクエリパラメータ(QueryParameter)といいます。
このクエリ パラメーターを取得する場合、paramMap が queryParamMap に変更されることを除いて、前のルーティング パラメーターと同様です。コードは次のとおりです:
this.activatedRoute.queryParamMap.subscribe((params) => { console.log('Query Parameter name: ', params.get('name')); // 地址 http://localhost:4200/page1?name=cat // 控制台输出:Query Parameter name: cat // 地址 http://localhost:4200/page1/ // 控制台输出:Query Parameter name: (实际结果为undefined) });4. URL パスの表示format
を app-routing.ts に追加できます (例: <pre class="brush:js;toolbar:false;">// app-routing.ts
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule],
})</pre>
6. 概要
パッケージ化後の展開の問題については、公式 Wi-Fi (https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-) を確認してください。 your-server-to-work-with-html5mode)
プログラミング関連の知識の詳細については、 プログラミング ビデオ をご覧ください。 !
以上がAngular 学習ルーティングの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。