角度ルーティングの実際の応用例

今回は Angular ルーティングの実践的な事例をお届けします。 Angular ルーティングを使用する際の注意点は何ですか? 以下は実践的な事例です。

はじめに:

Angular APP ビュー間のジャンプは Router に依存します この章では、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 サイトの他の関連記事に注目してください。

推奨読書:

vue+propsでデータを転送する方法

BubbleTransitionの実践事例の詳細な説明

以上が角度ルーティングの実際の応用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。