Angular 2-ルーティング

ルーティングは、メインページで選択したオプションに基づいて、ユーザーを異なるページに誘導するのに役立ちます。したがって、選択したオプションに基づいて、必要な角度コンポーネントがユーザーにレンダリングされます。

Angular 2アプリケーションでルーティングを実装する方法を確認するために必要な手順を見てみましょう。

ステップ1 *-基本参照タグをindexlファイルに追加します。

<!DOCTYPE html>
<html>
   <head>
      <base href = "/">
      <title>Angular QuickStart</title>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <base href = "/">
      <link rel = "stylesheet" href = "styles.css">

      <!-- Polyfill(s) for older browsers -->
      <script src = "node_modules/core-js/client/shim.min.js"></script>
      <script src = "node_modules/zone.js/dist/zone.js"></script>
      <script src = "node_modules/systemjs/dist/system.src.js"></script>
      <script src = "systemjs.config.js"></script>

      <script>
         System.import('main.js').catch(function(err){ console.error(err); });
      </script>
   </head>

   <body>
      <my-app></my-app>
   </body>
</html>

ステップ2 *-アプリケーションの2つのルートを作成します。このため、 *Inventory.component.ts および product.component.ts という2つのファイルを作成します

エディターを開く

ステップ3 *-次のコードをproduct.component.tsファイルに配置します。

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Products',
})
export   class   Appproduct  {
}

ステップ4 *-Inventory.component.tsファイルに次のコードを配置します。

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Inventory',
})
export class AppInventory  {
}

どちらのコンポーネントも派手なことは何もせず、コンポーネントに基づいてキーワードをレンダリングするだけです。そのため、Inventoryコンポーネントの場合、Inventoryキーワードがユーザーに表示されます。また、製品コンポーネントの場合、製品キーワードがユーザーに表示されます。

ステップ5 *-app.module.tsファイルで、次のコードを追加します-

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
];

@NgModule ({
   imports: [ BrowserModule,
   RouterModule.forRoot(appRoutes)],
   declarations: [ AppComponent,Appproduct,AppInventory],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

上記のプログラムについて、次の点に注意する必要があります-

appRoutesには2つのルートが含まれます。1つはAppproductコンポーネントで、もう1つはAppInventoryコンポーネントです。
両方のコンポーネントを宣言してください。
RouterModule.forRootは、アプリケーションへのルートを確実に追加します。

ステップ6 *-app.component.tsファイルに、次のコードを追加します。

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>`
})
export class AppComponent  { }

上記のプログラムについて、次の点に注意する必要があります-

<router-outlet> </router-outlet>は、ユーザーが選択したオプションに基づいてコンポーネントをレンダリングするプレースホルダーです。

ここで、すべてのコードを保存し、npmを使用してアプリケーションを実行します。ブラウザに移動すると、次の出力が表示されます。

製品

[インベントリ]リンクをクリックすると、次の出力が表示されます。

在庫

エラールートの追加

ルーティングでは、エラールートを追加することもできます。これは、ユーザーがアプリケーションに存在しないページに移動した場合に発生する可能性があります。

これを実装する方法を見てみましょう。

ステップ1 *-以下に示すように、NotFound.component.tsとしてPageNotFoundコンポーネントを追加します-

NotFound

ステップ2 *-新しいファイルに次のコードを追加します。

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Not Found',
})
export class PageNotFoundComponent {
}

ステップ3 *-次のコードをapp.module.tsファイルに追加します。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Appproduct } from './product.component'
import { AppInventory } from  './Inventory.component'
import { PageNotFoundComponent } from  './NotFound.component'
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
   { path: '**', component: PageNotFoundComponent }
];

@NgModule ({
   imports: [ BrowserModule,
   RouterModule.forRoot(appRoutes)],
   declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent],
   bootstrap: [ AppComponent ]
})

export class AppModule {
}

上記のプログラムについて、次の点に注意する必要があります-

これで、パス： 、コンポーネント：PageNotFoundComponentという追加のルートができました。したがって、は、デフォルトルートに適合しないルート用です。これらはPageNotFoundComponentコンポーネントに送られます。

ここで、すべてのコードを保存し、npmを使用してアプリケーションを実行します。ブラウザに移動すると、次の出力が表示されます。これで、間違ったリンクに移動すると、次の出力が得られます。

PageNotFound

Angular2-routing

Angular 2-ルーティング

エラールートの追加