在 Angular 中獲取當前路由

Muhammad Adil 2023年1月30日 2022年4月20日
  1. 網際網路上路由的定義和使用
  2. 在 Angular 中獲取當前路由的步驟
  3. 在 Angular 中建立一個 HTML 模板以獲取當前路由
在 Angular 中獲取當前路由

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 專案。
  • 將路由新增到 app.module.ts 檔案。
  • 將路由新增到 app-routing.module.ts 檔案。
  • 處理 HTML 和 TypeScript 檔案。

我們將使用上面提到的步驟編寫一個在 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 usservices。因為我們希望我們的模組儘可能獨立,所以它的所有子路由都定義在模組內的單獨檔案中。

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

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

Angular 的當前路由

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

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

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

相關文章 - Angular Router