在 Angular 中獲取當前路由

1. 網際網路上路由的定義和使用
2. 在 Angular 中獲取當前路由的步驟
3. 在 Angular 中建立一個 HTML 模板以獲取當前路由

Angular 路由是一個強大的工具，可以實現應用程式的導航。它是構建單頁應用程式的重要元件。

這篇文章是關於 Angular 路由的。這將有助於你學習如何在 Angular 中獲取當前路由。

Angular 為前端應用程式提供了一個路由，它為使用者提供當前路由並允許導航到其他路由。此外，Angular 路由提供雙向資料繫結，這意味著任何資料更改都會反映在檢視和 URL 中。

網際網路上路由的定義和使用

沒有路由，我們就無法執行網際網路。路由用於訪問 Internet 上的內容。這是一項服務，可讓你在一個地方訪問所有文章、視訊和其他內容。

我們使用路由通知站點的伺服器我們希望看到的頁面。例如，我們通知 www.wikipedia.com，我們對 /Angular (web framework) 感興趣。

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

上面的連結將我們帶到了 AngularJS 框架。伺服器可以藉助路由精確地決定我們希望訪問哪個頁面。

此外，它們通常是人類可辨認的。去哪裡不僅對伺服器很明顯，對使用者也很明顯。

將連結上的 /Angular 替換為你想要的任何子 wiki 的名稱，你就完成了。你無需使用搜尋或單擊任何按鈕即可到達那裡。

瀏覽器可以很好地處理路由，因為它長期以來一直是預設格式。它們可以輕鬆監控使用者的導航並提供後退按鈕或歷史記錄等功能。

點選這裡瞭解更多關於路由的資訊。

在 Angular 中獲取當前路由的步驟

Angular 提供了一個強大而全面的路由庫。讓我們瞭解 Angular 路由的基礎知識並討論如何獲取當前路由。

我們將使用上面提到的步驟編寫一個在 Angular 中獲取當前路由的完整示例。

路由服務提供了一組用於定義路由和路由引數的 API。Angular 路由可以配置為對不同的 URL 使用多個檢視，這樣你就可以擁有一個包含兩個部分的頁面，每個部分都有自己的檢視。

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 陣列是最關鍵的元素。我們可以在該陣列中定義我們的路由。

如你所見，這些路由被定義為物件。它們中的每一個都有一個路徑屬性。

例如，我們的 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 生成的屬性，用作路由的佔位符，指示匹配的元件應插入的位置。

應用程式 shell 是指包含路由出口的元件。

<router-outlet></router-outlet>

在同一個應用程式中，Angular 路由允許多個出口。主要出口是主要（或頂級）出口。

最後，outlet 屬性使你能夠為路由規範定義目標出口。

讓我們來完成在 Angular 中獲取當前路由的最後一步。為此，讓我們建立一個 app.component.ts 檔案。

請記住，我們在應用程式中建立了兩條路由，about us 和 services。因為我們希望我們的模組儘可能獨立，所以它的所有子路由都定義在模組內的單獨檔案中。

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 是一個路由事件觸發或導航順利結束時呼叫。要了解有關路由事件的更多資訊，請單擊此處。

當我們點選服務部分時，我們會得到當前的服務路由，關於我們部分也是如此。

此外，你還可以根據需要修改這些部分。

點選這裡檢視上述程式碼的演示。