Angular 中的 routerlink

我們將在 Angular 中引入 routerLink 方法並使用該方法進行導航。

Angular 中的路由連結

導航是任何 Web 應用程式或網站中最重要的部分之一。即使在建立只有一頁的單頁應用程式 (SPA) 時，我們仍然使用導航從一個部分跳轉到另一個部分。

導航使使用者可以輕鬆地在 Web 應用程式中找到他們要查詢的內容。通過提供簡單易懂的導航，我們可以使我們的應用程式使用者友好且易於使用。

Angular 提供了許多導航方法，可以輕鬆實現從簡單到複雜的路由。Angular 提供了一個單獨的模組 RouterModule 來在我們的 Web 應用程式中設定導航。

單頁應用程式 (SPA) 沒有要連結到的不同頁面，但它顯示不同的檢視。通常我們使用 HTML 顯示一個連結，如下所示。

# angular
<a href="/link">
  Example link in HTML.
</a>

Angular 為我們提供了一個指令 routerLink，它可以用來代替 href，如下所示。

# angular
<a routerLink="/home">
  Link Name.
</a>

routerLink 有兩種使用方式，一種作為字串使用，另一種作為陣列使用，如下圖。

# angular
<a routerLink="/home">
  Link used as a string.
</a>
<a [routerLink]="['/', 'user', 'fakhar']">
  Link used as an array.
</a>

當我們想要在連結中傳遞引數時使用 [routerLink]，而當我們想要連結時使用 routerLink。我們將通過一個示例，在該示例中，我們將使用 routerLink 瀏覽不同的元件。

因此，讓我們使用以下命令建立一個新應用程式。

# angular
ng new my-app

在 Angular 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。

# angular
cd my-app

讓我們執行我們的應用程式來檢查所有依賴項是否都安裝正確。

# angular
ng serve --open

我們將使用命令生成元件。首先，我們將生成我們的 home 元件。

# angular
ng generate component home

一旦我們生成了我們的 home 元件，我們將生成我們的 about 元件。

# angular
ng generate component about

最後，我們使用以下命令生成我們的 services 元件。

# angular
ng generate component services

生成我們的元件後，我們將在單獨的資料夾中擁有三個元件，其中包含 3 個檔案。

輸出：

一旦我們生成了我們的元件，我們將建立檢視。首先，我們將從 about 資料夾中開啟 about.component.html 並新增以下程式碼。

# angular
<div class="container" >
  <h1> This is about Component </h1>
  <h3> Try navigating to other components </h3>
</div>

我們將開啟 home 資料夾中的 home.component.html 檔案並新增以下程式碼。

# angular
<div class="container">
 <h1> This is home component </h1>
 <h3> Try navigating to other components </h3>
</div>

我們將開啟 services 資料夾中的 services.component.html 檔案並新增以下程式碼。

# angular
<div class="container">
 <h1> This is Services component </h1>
 <h3> Try navigating to other components </h3>
</div>

一旦我們準備好我們的元件和檢視，我們將在 app-routing.module.ts 中定義我們的路由。我們將匯入 ngModule。

我們還將從 router 匯入 Routes 和 RouterModule 並匯入我們建立的元件。

# angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent}  from './about/about.component';
import { HomeComponent} from './home/home.component';
import { ServicesComponent } from './services/services.component';

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

匯入所有內容後，我們將定義到元件的路由，如下所示。

# angular
const routes: Routes = [

    { path: 'about', component: AboutComponent },
    { path: 'home', component: HomeComponent},
    { path: 'services', component: ServicesComponent },
 ];

我們將在 app.component.html 中建立導航選單。我們將使用 routerLink 從我們剛剛定義的路由中獲取連結，並使用 router-outlet 來顯示我們元件的內容。

<ul class="nav navbar-nav">
  <li>
    <a routerLink="/home">Home</a>
  </li>
  <li>
    <a routerLink="/about">About</a>
  </li>
  <li>
    <a routerLink="/services">Services</a>
  </li>
</ul>

<router-outlet> </router-outlet>

輸出：

上面的例子表明，我們可以使用 routerLink 並定義路由輕鬆地從一個元件導航到另一個元件。

所以在本教程中，我們學習瞭如何建立元件和定義路由，使用 routerLink 在元件之間輕鬆導航，以及使用 routerLink 和 [routerLink]。

此處演示