在 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 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
是一個路由事件觸發或導航順利結束時呼叫。要了解有關路由事件的更多資訊,請單擊此處。
當我們點選服務部分時,我們會得到當前的服務路由,關於我們部分也是如此。
此外,你還可以根據需要修改這些部分。
點選這裡檢視上述程式碼的演示。
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