搜尋
首頁web前端js教程聊一聊Angular中的路由(Routing)
聊一聊Angular中的路由(Routing)Jun 21, 2021 am 10:35 AM
angularrouting路由

本篇文章跟大家介紹一下Angular中的路由(Routing)。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

聊一聊Angular中的路由(Routing)

環境:

  • Angular CLI: 11.0.6
  • Angular: 11.0.7
  • Node: 12.18.3
  • npm : 6.14.6
  • IDE: Visual Studio Code

##1. 摘要

簡單來說網址列中,不同的位址(URL)對應不同的頁面,這就是路由。同時,點擊瀏覽器的前進和後退按鈕,瀏覽器就會在你的瀏覽記錄中向前或向後導航,這也是基於路由。 【相關教學推薦:《

angular教學》】

在Angular 裡面,Router 是獨立的模組,定義在@angular/router 模組中,

  • #Router 可以配合NgModule 進行模組的延遲載入(懶載入)、預先載入操作(參考《Angular入門到精通系列教學(11)- 模組(NgModule),延遲載入模組》);

  • Router 會管理元件的生命週期,它會負責建立、銷毀元件。

對於一個新的基於AngularCLI的項目,初始化時可以透過選項,將AppRoutingModule預設加入到app.component.ts中。

2. 路由(Router)基本用法

#2.1. 準備

我們先創建2個頁面,用來說明路由的使用:

ng g c page1
ng g c page2

使用上面AnuglarCLI指令,建立Page1Component, Page2Component 2個元件。

2.2. 註冊路由

//src\app\app-routing.module.ts
const routes: Routes = [
  {
    path: 'page1',
    component: Page1Component
  },
  {
    path: 'page2',
    component: Page2Component
  },
];

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

可以看到,簡單的路由註冊,只需要path和component2個屬性,分別定義路由的相對路徑,以及這個路由的回應元件。

2.3. html中的用法

<a routerLink="page1">Page1</a> |
<a routerLink="page2">Page2</a>

在html範本中,直接使用routerLink屬性,標識為angular的路由。執行程式碼,可以看到Page1和Page2 兩個超鏈接,點擊可以看到網址列位址改為http://localhost:4200/page2或http://localhost:4200/page1, 頁面內容在page1和page2中切換

2.4. ts 程式碼中的用法

有時候,需要根據ts中的業務邏輯,進行跳轉。 ts中,需要注入Router實例,如

constructor(private router: Router) {}
跳轉程式碼:

  // 跳转到 /page1
  this.router.navigate([&#39;/page1&#39;]);

  // 跳转到 /page1/123
  this.router.navigate([&#39;/page1&#39;, 123]);

3. 接收參數

##3.1 . 路徑中的參數一般來說,我們把參數當作url中的一段,如/users/1, 代表查詢id是1的用戶,路由定義為"/users /id" 這種風格。

針對我們的簡單頁面,例如我們的page1頁面可以傳id參數,那麼我們需要修改我們的routing為:

const routes: Routes = [
  {
    path: &#39;page1/:id&#39;,    //接收id参数
    component: Page1Component,
  },
  {
    // 实现可选参数的小技巧。 这个routing处理没有参数的url
    path: &#39;page1&#39;,        
    redirectTo: &#39;page1/&#39;,   // 跳转到&#39;page1/:id&#39;
  },
  {
    path: &#39;page2&#39;,
    component: Page2Component,
  },
];

ts程式碼讀取參數時, 首先需要注入ActivatedRoute,程式碼如下:

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit(): void {
  this.activatedRoute.paramMap.subscribe((params) => {
    console.log(&#39;Parameter id: &#39;, params.get(&#39;id&#39;));

    // 地址 http://localhost:4200/page1/33   
    // 控制台输出:Query Parameter name:  33

    // 地址 http://localhost:4200/page1/     
    // 控制台输出:Query Parameter name:   (实际结果为undefined)
  });
}

3.2. 參數(QueryParameter)中的參數參數還有另外一種寫法,如http:// localhost:4200/?name=cat, 即URL位址後,加上一個問號'?', 之後再加參數名稱和參數值('name=cat')。這種稱為查詢參數(QueryParameter)。

取這查詢參數時,和先前的路由參數類似,只是paramMap改為queryParamMap,程式碼如下:

this.activatedRoute.queryParamMap.subscribe((params) => {
  console.log(&#39;Query Parameter name: &#39;, params.get(&#39;name&#39;));

  // 地址 http://localhost:4200/page1?name=cat
  // 控制台输出:Query Parameter name:  cat

  // 地址 http://localhost:4200/page1/
  // 控制台输出:Query Parameter name:   (实际结果为undefined)
});

4. URL路徑顯示格式

#不同於傳統的純靜態(html)站點,angular中的url不是對應一個真實的文件(頁面),因為anuglar接管的路由(Routing)處理,來決定顯示那個Component給終端用戶。為了針對不同的場景,angular的URL路徑顯示格式有2中:

    http://localhost:4200/page1/123
  • http://localhost:4200/#/page1/123
  • #預設是第一種,不加#的。如果需要,可以在app-routing.ts中,加入
useHash: true

, 如:<pre class='brush:php;toolbar:false;'>// app-routing.ts @NgModule({ imports: [RouterModule.forRoot(routes, { useHash: true })], exports: [RouterModule], })</pre>

#5. 部署中遇到的問題

#同樣,因為anuglar接管的路由(Routing)處理,所以部署時,部署到iis, nginx等等的伺服器,都會有不同的技巧(要求),詳細參考:

https://github.com /angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode


6.總結

    angular預設不支援可選路由(e.g. /user/:id?),但是我們可以定義2個路由,指向同一個Component來實作這個,達到程式碼重複使用;(或使用redirectTo)
  • 可以使用useHash參數,實作augular路徑前加一個#;
  • 讀取參數時,都需要subscribe訂閱一下,不能直接讀取。
  • 打包後部署問題,查看官方wifi (https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your- server-to-work-with-html5mode)

更多程式相關知識,請造訪:程式設計入門! !

以上是聊一聊Angular中的路由(Routing)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:csdn。如有侵權,請聯絡admin@php.cn刪除
聊聊Angular中的元数据(Metadata)和装饰器(Decorator)聊聊Angular中的元数据(Metadata)和装饰器(Decorator)Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

angular学习之详解状态管理器NgRxangular学习之详解状态管理器NgRxMay 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

浅析angular中怎么使用monaco-editor浅析angular中怎么使用monaco-editorOct 17, 2022 pm 08:04 PM

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

项目过大怎么办?如何合理拆分Angular项目?项目过大怎么办?如何合理拆分Angular项目?Jul 26, 2022 pm 07:18 PM

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

聊聊自定义angular-datetime-picker格式的方法聊聊自定义angular-datetime-picker格式的方法Sep 08, 2022 pm 08:29 PM

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

Angular + NG-ZORRO快速开发一个后台系统Angular + NG-ZORRO快速开发一个后台系统Apr 21, 2022 am 10:45 AM

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

聊聊Angular Route中怎么提前获取数据聊聊Angular Route中怎么提前获取数据Jul 13, 2022 pm 08:00 PM

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!

浅析Angular中的独立组件,看看怎么使用浅析Angular中的独立组件,看看怎么使用Jun 23, 2022 pm 03:49 PM

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具