Angular で現在のルートを取得する

1. インターネット上のルートの定義と使用
2. Angular で現在のルートを取得する手順
3. Angular で現在のルートを取得するための HTML テンプレートを作成する

Angular ルーターは、アプリケーションのナビゲーションを可能にする強力なツールです。これは、シングルページアプリケーションを構築するために不可欠なコンポーネントです。

この記事は Angular ルーターについてです。Angular で現在のルートを取得する方法を学ぶことはあなたにとって役に立ちます。

Angular は、フロントエンドアプリ用のルーターを提供します。これにより、ユーザーに現在のルートが提供され、他のルートへのナビゲーションが可能になります。さらに、Angular Router は双方向のデータバインディングを提供します。つまり、データの変更はビューと URL の両方に反映されます。

インターネット上のルートの定義と使用

ルートなしでインターネットを運営することはできません。ルートは、インターネット上のコンテンツにアクセスするために使用されます。すべての記事、動画、その他のコンテンツに 1 か所でアクセスできるサービスです。

ルートを使用して、見たいページをサイトのサーバーに通知します。たとえば、/Angular (web framework) に関心があることを www.wikipedia.com に通知します。

https://en.wikipedia.org/wiki/Angular_(web_framework)

上記のリンクから、AngularJS フレームワークにアクセスできます。サーバーは、ルートを使用して、アクセスするページを正確に決定できます。

さらに、それらは通常、人間が判読できます。サーバーがどこに行くかは明らかであるだけでなく、ユーザーにとっても明白です。

リンクの/Angular を任意のサブ Wiki の名前に置き換えれば、完了です。検索を使用したり、ボタンをクリックしたりしなくても、そこにたどり着くことができます。

長い間デフォルトのフォーマットであったため、ブラウザはルートをかなりうまく処理できます。ユーザーのナビゲーションを簡単に監視し、戻るボタンや履歴などの機能を提供できます。

ルートの詳細については、ここをクリックしてください。

Angular で現在のルートを取得する手順

Angular は、ルーティング用の強力で包括的なライブラリを提供します。Angular ルーティングの基本を理解し、現在のルートを取得する方法について説明しましょう。

上記の手順を使用して、Angular で現在のルートを取得する完全な例を記述します。

ルーティングサービスは、ルートとルートパラメータを定義するための一連の API を提供します。Angular ルーターは、異なる URL に対して複数のビューを使用するように構成できるため、1つのページに 2つのセクションがあり、それぞれにビューがあります。

RouterModule には、ルーティング関連のすべての情報が含まれています。このモジュールには Angular が含まれています。ルーティングを使用するには、そのモジュールを AppModule にインポートする必要があります。

では、ルーティングをどのように実践するのでしょうか。前に述べたように、RouterModule. をインポートすることから始めます。

import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '@angular/router';

これで、アプリをルーティングする準備が整いました。アプリケーションで使用できるようにするルートを指定する必要があります。

同時に、特定のルートに表示するコンポーネントを決定します。しかし、基本から始めましょう。

ルートを定義するために別のルーティングファイルを作成することは優れた方法です。Module+.routing.ts は、このルーティングファイルの最も一般的な名前です。AppModule のルーティングファイルを作成するには、app-routing.module.ts を呼び出します。

それでは、そのファイルを app.module.ts ファイルに隣接させましょう。そのファイルに、モジュールのすべてのルートを含む静的配列を作成します。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutusComponent } from './aboutus/aboutus.component';
import { AppComponent } from './app.component';

import { ServicesComponent } from './services/services.component';

const routes: Routes = [
  {path: '', redirectTo: 'AppComponent', pathMatch: 'full'},

  {path:'aboutus', component:AboutusComponent},

  {path:'services', component:ServicesComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

ここで、私たちが定義した Routes 配列は最も重要な要素です。その配列内にルートを定義できます。

ご覧のとおり、これらのルートはオブジェクトとして定義されています。それぞれに path プロパティがあります。

たとえば、aboutusComponent へのパスは/aboutus になります。ここでは、可変パラメータを使用してルートを構築することもできます。

たとえば、blog ルートの下に blog コンポーネントがあるとします。ただし、このコンポーネントには、ルートに応じて異なるブログを表示する必要があります。

これを行うには、ブログの ID をルートに追加します。

Angular で現在のルートを取得するための HTML テンプレートを作成する

上記の手順を実行した後、現在のルートを取得するために HTML ファイルで作業する時が来ました。そのために、ルーターリンクを使用します。

routerLink 属性を使用すると、HTML ドキュメントからアプリのルートを直接リンクできます。ディレクティブを HTML 要素内に配置します。

訪問者がコンポーネントをクリックすると、Angular に現在のルートが表示されます。

<h3>Example of How to get Current Route in Angular</h3>

<ul>
   <li routerLinkActive="active">
      <a [routerLink]="['/aboutus']">About Us</a>
   </li>
   <li routerLinkActive="active">
      <a [routerLink]="['/services']">Services</a>
   </li>

</ul>

The current Route is {{currentRoute}}

<router-outlet></router-outlet>

また、ここではルーターコンセントを使用しました。ルーターのアウトレット router-outlet は、RouterModule によって生成されるプロパティであり、ルーターのプレースホルダーとして機能し、一致するコンポーネントを挿入する場所を示します。

アプリケーションシェルは、ルーターアウトレットを含むコンポーネントを指します。

<router-outlet></router-outlet>

同じアプリケーションで、Angular ルーターは多くのアウトレットを許可します。プライマリアウトレットはメイン（またはトップレベル）アウトレットです。

最後に、outlet 属性を使用すると、ルート仕様のターゲットアウトレットを定義できます。

Angular で現在のルートを取得する最後のステップに取り組みましょう。そのために、app.component.ts ファイルを作成しましょう。

アプリケーションには、about us と services の 2つのルートを作成したことを忘れないでください。モジュールを可能な限り自己完結型にする必要があるため、そのすべてのサブルートはモジュール内の個別のファイルで定義されます。

import { Component } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  currentRoute: string;
  constructor(private router: Router) {
    this.currentRoute = "Demo";
    this.router.events.subscribe((event: Event) => {

        if (event instanceof NavigationEnd) {
            this.currentRoute = event.url;
              console.log(event);
        }


    });

}
}

ここで、NavigationEnd は、ナビゲーションがスムーズに終了したときにトリガーまたは呼び出されるルーターイベントです。ルーターイベントの詳細については、ここをクリックしてください。

サービスセクションをクリックすると、現在のサービスルートが表示されます。同じことが会社概要セクションでも発生します。

さらに、要件に応じてセクションを変更することもできます。

上記のコードのライブデモンストレーションを確認するには、ここをクリックしてください。