Angular 5.x での Router の使用の詳細な説明

今回は、Angular 5.x での Router の使用について詳しく説明します。Angular 5.x で Router を使用する際の 注意事項 について、実際のケースを見てみましょう。

はじめに:

Angular APPビュー間のジャンプはRouterに依存します

例を挙げて説明します

実行結果は以下の通りです。 ホーム、バージョン情報、ダッシュボードの 3 つのナビゲーション バーが設定されています。 別のナビゲーション バーをクリックして、対応するページに移動します:

3 つのコンポーネントを作成します

1. ng g c home

2. ng g c about

3. ng g c ダッシュボード

と構成

(1) **Angular Router の導入 **

Angular Router を使用する場合は、次のように RouterModule を導入する必要があります:

// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
 BrowserModule, RouterModule
],

(2) ルーティング設定

誰がコンポーネントを管理するのか覚えておいてください。そうです、モジュールによって管理されています。 そのため、新しく作成したコンポーネントをapp.moudleに導入します。 以下の通り:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { appRoutes } from './routerConfig';
import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

ヒント: 管理を容易にするために、新しく作成したコンポーネントをコンポーネントフォルダーに移動しました。

Router Configure ファイルを作成する

アプリディレクトリに、routerConfig.ts ファイルを作成します。 コードは次のとおりです:

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
export const appRoutes: Routes = [
 { path: 'home', 
 component: HomeComponent 
 },
 {
 path: 'about',
 component: AboutComponent
 },
 { path: 'dashboard',
 component: DashboardComponent
 }
];

注: Angular 2.X 以降では、JavaScript の代わりに TypeScript を使用してコードを作成するため、ファイルのサフィックスは次のようになります: js ではなく ts

この routerConfigue ファイルの呼び出し方法? app.moudle.ts は Angular アプリ全体への入り口であるため、app.module.ts にロードする必要があります。

// app.module.ts
import { appRoutes } from './routerConfig';
imports: [
 BrowserModule,
 RouterModule.forRoot(appRoutes)
],

ルーターアウトレットの宣言

app.component.html ファイルに次のコードを追加します:

<p style="text-align:center">
 <h1>
  {{title}}!!
 </h1>
 <nav>
  <a routerLink="home" routerLinkActive="active">Home</a>
  <a routerLink="about">About</a>
  <a routerLink="dashboard">Dashboard</a>
 </nav>
 <router-outlet></router-outlet>
 </p>

Run

プロジェクトが配置されているパスを入力して実行します

ng serve --open

webpack が正常にコンパイルされたら、 , in ブラウザーのアドレス バーに「http://localhost:4200

」と入力して、この記事の冒頭の結果を確認します。

ルーターについて、別の書き方:

app.moudle.ts ファイルのコードは次のとおりです:

 imports: [
  BrowserModule,
  RouterModule.forRoot(
  [
   { path: 'home', 
   component: HomeComponent 
   },
   {
   path: 'about',
   component: AboutComponent
   },
   {
   path: 'dashboard',
   component: DashboardComponent
   }
  ]
  )
 ],

この方法では、別の routerConfigure.ts ファイルを作成する必要はありません。

概要

コンポーネント指向(コンポーネント)の導入により、AngularJS(1.X)よりもルーティング管理が格段に便利になりました。

さらなる最適化:

おそらく、http://localhost:4200 にアクセスするとき、そのパスは「/」である必要があり、このデフォルトのパスを設定する必要があることに気づいたと思います。

{
   path: '',
   redirectTo:'/home',
   pathMatch: 'full'
   },

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JS を使用して入力テキスト ボックスのコンテンツを操作する

React Router v4 の使用方法の詳細な説明

以上がAngular 5.x での Router の使用の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。