Angular 中的路由導航

我們將介紹 Angular 中的路由服務 navigate 方法，並討論如何在 Angular 應用程式中使用它進行導航。

Angular 中的路由導航

導航是任何 Web 應用程式中最重要的部分之一。即使在構建沒有多個頁面的單頁面應用程式 (SPA) 時，我們仍然使用導航從一個部分移動到另一個部分。

導航使使用者可以輕鬆地在 Web 應用程式上找到他們要查詢的內容。如果我們提供清晰易懂的導航，我們的 Web 應用程式就會成功。

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

路由 navigate() 方法用於以程式設計方式將使用者從一個頁面導航到另一個頁面。

我們將通過一個示例，在該示例中，我們將使用 navigate() 瀏覽不同的元件。因此，讓我們使用以下命令建立一個新應用程式。

# 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 中定義我們的路由。如下所示，我們將從 router 匯入 ngModule、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 中建立導航選單。每個連結都將使用 (click) 方法呼叫一個函式。

我們將使用 router-outlet 顯示元件資料，如下所示。

# angular
<ul class="nav navbar-nav">
  <li>
    <a (click)="goToHome()">Home</a>
  </li>
  <li>
    <a (click)="goToAbout()">About</a>
  </li>
  <li>
    <a (click)="goToServices()">Services</a>
  </li>
</ul>

<router-outlet> </router-outlet>

我們將建立函式 goToHome()、goToAbout() 和 goToServices()。我們將開啟 app.component.ts 並從 router 匯入 Router 並使用 router.navigate 我們將建立這些函式以在元件之間導航，如下所示。

# angular
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private router: Router) {}

  goToHome() {
    this.router.navigate(['/', 'home']);
  }
  goToAbout() {
    this.router.navigate(['/', 'about']);
  }
  goToServices() {
    this.router.navigate(['/', 'services']);
  }
}

輸出：

正如你從上面的示例中看到的那樣，我們可以使用 navigate() 並定義路由輕鬆地從一個元件導航到另一個元件。

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

此處演示