Angular 学習のルーティング (ルーティング) についての話

この記事では、Angular の学習を継続し、Angular でのルーティングを簡単に理解し、ルーティングの基本的な使用法を紹介し、パラメーターを受け取る方法について説明します。

環境:

• Angular CLI: 11.0.6

• 角度: 11.0.7

• ノード: 12.18.3

• npm : 6.14.6

• IDE: Visual Studio Code

1. 概要

簡単に言えば、アドレス バーにはさまざまなアドレス ( URL) はさまざまなページに対応しており、これがルーティングです。また、ブラウザの「進む」ボタンと「戻る」ボタンをクリックすると、ブラウザはルーティングに基づいて閲覧履歴を前後に移動します。 [関連チュートリアルの推奨事項: "angular チュートリアル "]

Angular では、Router は独立したモジュールであり、@angular/router モジュールで定義されています。

• #Router は NgModule と連携して、モジュールの遅延ロード (遅延ロード) およびプリロード操作を実行できます (「Angular 入門からマスタリー シリーズ チュートリアル (11) - モジュール (NgModule)、遅延ロード モジュール」を参照);

• ルーターはコンポーネントのライフサイクルを管理し、コンポーネントの作成と破棄を担当します。

新しい AngularCLI ベースのプロジェクトの場合、初期化中のオプションを使用して、デフォルトで AppRoutingModule を app.component.ts に追加できます。

2. 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 のような Router インスタンスを挿入する必要があります。パラメータを受け取る

# 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

従来の純粋な静的 (html) サイトとは異なり、angular の URL は実際のファイル (ページ) に対応しません。これは、angular がルーティング (ルーティング) 処理を引き継いで、どのコンポーネントにアクセスするかを決定するためです。エンドユーザーに表示します。さまざまなシナリオに適応するために、Angular には 2 つの URL パス表示形式があります:

http://localhost:4200/page1/123
#http://localhost:4200/#/page1/123
デフォルトは、# を追加しない最初のホストです。必要に応じて、

useHash: true

を app-routing.ts に追加できます (例: <pre class="brush:js;toolbar:false;">// app-routing.ts @NgModule({ imports: [RouterModule.forRoot(routes, { useHash: true })], exports: [RouterModule], })</pre>

5) デプロイメント中に発生した問題

#同様に、anuglar がルーティング (Routing) 処理を引き継ぐため、iis や nginx などのサーバーにデプロイする場合は、さまざまなテクニック (要件) が必要になります。詳細な参考情報: https://github.com /angular- ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

6. 概要

angular はデフォルトではオプションのルーティング (例: /user/:id?) をサポートしていませんが、同じコンポーネントを指す 2 つのルートを定義してこれを実現し、コードの再利用を実現できます (または redirectTo を使用します)。

• useHash パラメータを使用して、正規パスの前に # を追加できます;

• パラメータを読み取るときはサブスクライブする必要があり、パラメータを直接読み取ることはできません。

• パッケージ化後の展開の問題については、公式 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 サイトの他の関連記事を参照してください。