Angular 学習ルーティングの簡単な分析-jsチュートリアル-php.cn

Angular 学習ルーティングの簡単な分析

青灯夜游

リリース： 2021-11-05 10:13:12

転載

2348 人が閲覧しました

この記事では、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 モジュールで定義されています。

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

新しい 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: &#39;page1&#39;,
    component: Page1Component
  },
  {
    path: &#39;page2&#39;,
    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([&#39;/page1&#39;]);

  // 跳转到 /page1/123
  this.router.navigate([&#39;/page1&#39;, 123]);

ログイン後にコピー

3 のような Router インスタンスを挿入する必要があります。パラメータを受け取る

# 3.1 . パスのパラメータ一般的に言えば、ID が 1 のユーザーを表す /users/1 などの URL 内のセグメントとしてパラメータを使用します。ルートは「/users /id」スタイルとして定義されます。

たとえば、単純なページの場合、page1 ページは id パラメーターを渡すことができるため、ルーティングを次のように変更する必要があります。

const routes: Routes = [
  {
    path: &#39;page1/:id&#39;,    //接收id参数
    component: Page1Component,
  },
  {
    // 实现可选参数的小技巧。 这个routing处理没有参数的url
    path: &#39;page1&#39;,        
    redirectTo: &#39;page1/&#39;,   // 跳转到&#39;page1/:id&#39;
  },
  {
    path: &#39;page2&#39;,
    component: Page2Component,
  },
];

ログイン後にコピー

tsコードがパラメーターを読み取るとき、最初に注入する必要があります。 ActivatedRoute、コードは次のとおりです:

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit(): void {
  this.activatedRoute.paramMap.subscribe((params) => {
    console.log(&#39;Parameter id: &#39;, params.get(&#39;id&#39;));

    // 地址 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(&#39;Query Parameter name: &#39;, params.get(&#39;name&#39;));

  // 地址 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 の URL パス表示形式には 2 つの形式があります:

useHash: true

を app-routing.ts に追加できます (例:

// app-routing.ts
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
})

ログイン後にコピー

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 サイトの他の関連記事を参照してください。