Angular2中的路由(簡單總結)

Angular2中建立路由的4個步驟:

1、路由配置:最好新建一個app.toutes.ts文件(能不能用ng命令新建有待調查)

Angular2中路由要解決的是URL與頁面的對應關系(比如URL是http://localhost:4200/all-people,那么頁面顯示的就應該是allPeople畫面,URL是http://localhost:4200/first-come,頁面顯示的就應該是firstCome畫面)。

在Angular2中頁面是由組件組成的(Angular2中的根模塊對應的根組件就表示了整個應用,應用也可以說成只有一個組件,也就是一個頁面,這就是單頁面應用的由來吧),所以路由解決的是URL與組件的對應關系。

這個需要一個數據,它用來表示url與組件的對應關系,Angular2中把這個數據叫作“路由配置”

// 需要從路由模塊中引入Routes類
import { Routes } from '@angular/router';
// 對于需要用url鏈接的組件,需要從文件中導入
import { AllPeopleComponent } from './all-people/all-people.component';
import { HomePageComponent } from './home-page/home-page.component';
// export 導出供其他模塊導入   這是一個數組,數組中沒一個元素是一個對象,最常見的是這個對象有2個屬性,分別是path(對應url)和component(對應組件),直觀上url中輸入一個路徑,在數組中查找path,如果有對應的話就在指定區域顯示與path對應的組件。
export const rootRouterConfig: Routes = [{path: '', // http://localhost:4200component: HomePageComponent},{path: 'all-people', // http://localhost:4200/all-peoplecomponent: AllPeopleComponent},
]

2、在根模塊中創建根路由模塊。

根路由模塊包含了路由所需的使用服務,它以路由配置為參數,調用RouterModule.forRoot()方法來創建。

這里還有路由策略的問題,會在后續再補充

// 在根模塊中導入路由配置
import { rootRouterConfig } from './app.routes'; // 注意沒有.ts
// 需要調用RouterModule.forRoot()方法
import { RouterModule } from '@angular/router';
// 創建路由模塊
const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig);
// 根路由模塊默認提供的路由策略為PathLocationStrategy(另外一個是HashLocationStrategy)。
// PathLocationStrategy路由策略需要一個base路徑,設置base路徑有2種方式,最簡單的是在index.html中設置<base>
 // 路由策略:pathLocationStrategy // const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig); 
// 路由策略:HashLocationStrategy // const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig, {useHash: true});
@NgModule({ declarations: [],
// 導入路由模塊imports: [rootRouterModule],providers: [],bootstrap: [AppComponent] }) export class AppModule { }

3、添加組件存放的區域,使用RouterOutlet指令

這個指令就是在頁面上預留一個區域,當url改變時匹配路由配置中的path,匹配成功后就將與path對應的component加載到這個區域里。

一般情況下,這個指令是放在根組件中,但也會有子組件路由同一父組件的子組件的情況。

<section class="container"><router-outlet></router-outlet>
</section>

到目前為止,一個簡單的路由就基本配置完成了,只要在url中輸入正確的path,就能顯示對應的組件。

但是,我們總不能跳轉頁面時還要手動輸入url吧,我們的理想方法是通過頁面的一些操作(比如點擊事件,延遲)改變url,實現path對應的組件顯示,這就是路由跳轉。

4、路由跳轉

如上說的,路由跳轉就是為了不要手動改變url,最常見的就是點擊事件改變url,實現路由跳轉,顯示組件。

路由跳轉有兩種方式:指令跳轉和代碼跳轉。

指令跳轉指的是使用RouterlLink指令,該指令接收一個鏈接參數數組,當事件被觸發時,數組中的所有元素與路由配置中的path接收的數組中的元素進行一一對比,全都相等時得以匹配。

RouterLink有一個好的方法,可以指定routerLinkActive = “className”,也就是當RouterLink被激活時可以給相應的html元素添加clas類。神奇地是,routerLinkActive可以作用于父級元素。

        <div id="navbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li><a [routerLink]="['/all-people']">allPeople</a></li><li><a [routerLink]="['/first-come']">firstCome</a></li><li><a [routerLink]="['/last-leave']">lastLeave</a></li><li><a [routerLink]="['/form']">newPerson</a></li><li><a [routerLink]="['/bugManage']">bugManage</a></li></ul></div>

需要特別注意的是:RouterLink指令僅響應click事件(碼源分析以后補上),要想響應其他(比如延遲顯示)事件,就要用到代碼跳轉。

以上是Angular2中路由的基本用法,一些細節和關鍵的步驟會在后續更新,比如URL帶參數,頁面如何取得url的值,代碼跳轉和指令跳轉的區別,路由策略的區別,子路由。。。。。

新手,有問題歡迎大家指正。。。

?

轉載于:https://www.cnblogs.com/FireCamp/p/7599119.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/280258.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/280258.shtml
英文地址,請注明出處:http://en.pswp.cn/news/280258.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

受 SQLite 多年青睞,C 語言到底好在哪兒?

SQLite 近日發表了一篇博文&#xff0c;解釋了為什么多年來 SQLite 一直堅持用 C 語言來實現&#xff0c;以下是正文內容&#xff1a; C 語言是最佳選擇 從2000年5月29日發布至今&#xff0c;SQLite 一直都是用 C 語言實現。C 一直是實現像 SQLite 這類軟件庫的最佳語言。目前&…

為什么 Random.Shared 是線程安全的

在多線程環境中使用 Random 類來生成偽隨機數時&#xff0c;很容易出現線程安全問題。例如&#xff0c;當多個線程同時調用 Next 方法時&#xff0c;可能會出現種子被意外修改的情況&#xff0c;導致生成的偽隨機數不符合預期。為了避免這種情況&#xff0c;.NET 框架引入了 Ra…

(3)Python3筆記之變量與運算符

一、變量 1&#xff09;. 命名規則&#xff1a; 1. 變量名不能使用系統關鍵字或保留關鍵字 2. 變量區分大小寫 3. 變量命名由字母&#xff0c;數字&#xff0c;下劃線組成但不能以數字開頭 4. 不需要聲明變量類型 是 a 1 非 int a 1 5. 查看變量內存地址 id(a), id(b) 6…

some demos

import ../css/detail.css;// 找到字符串中重復次數最多的字符 function findMax(str) {let maxChar ;let maxValue 1;if (!str.length) return;let arr str.replace(/\s/g, ).split();let obj {};for (let i 0; i < arr.length; i) {if (!obj[arr[i]]) {obj[arr[i]] …

WPF 實現視頻會議與會人員動態布局

WPF 實現視頻會議與會人員動態布局控件名&#xff1a;SixGridView作 者&#xff1a;WPFDevelopersOrg - 驚鏵原文鏈接[1]&#xff1a;https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用.NET40&#xff1b;Visual Studio 2019;接著上一篇是基于Grid實現的視頻查看感…

漢三水屬國(北地屬國、安定屬國)

漢三水屬國&#xff08;北地屬國、安定屬國&#xff09; 兩漢&#xff08;西漢、東漢&#xff09;400年中&#xff0c;由于各種原因&#xff0c;經常有成批的匈奴歸附漢朝&#xff0c;兩漢政府對他們采取了較為妥善的安置政策&#xff0c;其中最主要的措施是為他們設立專門的居…

《爆發》作者:大數據領域將有新贏家

本文講的是《爆發》作者&#xff1a;大數據領域將有新贏家,全球復雜網絡研究專家日前到訪中國&#xff0c;為其新作《爆發》作宣傳。他在接受國內媒體采訪時表示&#xff0c;未來可能有新公司取代谷歌、Facebook等公司&#xff0c;成為大數據領域的贏家。 《爆發》一書是一本討…

chromebook刷機_如何獲取Android應用以查看Chromebook上的外部存儲

chromebook刷機Android apps are a great way to expand the sometimes limited capabilities of Chromebooks, but they can be a problem if you store most of your data on an external medium—like an SD card, for example. Android應用程序是擴展Chromebook有時有限功能…

Stream流與Lambda表達式(四) 自定義收集器

一、自定義SetCustomCollector收集器 package com.java.design.Stream.CustomCollector;import java.util.*; import java.util.function.BiConsumer; import java.util.function.BinaryOperator; import java.util.function.Function; import java.util.function.Supplier; im…

ModelState.IsValid忽略型別的檢查錯誤

Web Api在Int或DateTime如果傳空值的話會自動幫忙設預設值&#xff0c;但是在ModelState.IsValid的時候&#xff0c;卻會出現型別上的錯誤.解決方式把Model改成正確&#xff0c;也就是預設允許可以為nullpublic class DemoModel { …

android 指紋添加_如何將手勢添加到Android手機的指紋掃描儀

android 指紋添加So you have a shiny new Android phone, equipped with a security-friendly fingerprint scanner. Congratulations! But did you know that, while useful on its own, you can actually make the fingerprint scanner do more than just unlock your phone…

關于前端性能優化

常用的優化有兩部分 第一&#xff1a;面向內容的優化 減少 HTTP 請求減少 DNS 查找避免重定向使用 Ajax 緩存延遲載入組件預先載入組件減少 DOM 元素數量切分組件到多個域最小化 iframe 的數量不要出現http 404 錯誤第二&#xff1a;面向 Server 縮小 Cookie針對 Web 組件使用域…

前端工程化:圍繞Jenkins打造工作流的過程

背景 1年前入職時&#xff0c;公司前端部門的靜態代碼部署都是用ftp工具拖拽部署&#xff0c;沒有記錄&#xff0c;沒有關聯&#xff0c;經常造成許多困擾的問題&#xff0c; 比如&#xff1a;今天有沒有其他人在我要部署的路徑上工作&#xff1f;我的代碼為啥被蓋掉了&#xf…

業務id轉密文短鏈的一種實現思路

業務場景&#xff1a; 買家通過電商app下單后&#xff0c;會受到一條短信&#xff0c;短信內容中包括改訂單詳情頁面的h5地址連接&#xff0c;因為是出現在短信中&#xff0c;所以對連接有要求&#xff1a;1.盡量短&#xff1b;2.安全性考慮&#xff0c;訂單在數據庫中對應的自…

百度高管:問心無愧

1月23日下午消息&#xff0c;今天下午&#xff0c;百度召開百家號2019內容創作者盛典&#xff0c;百度副總裁沈抖出席并發布演講。 就在前一天&#xff0c;一篇名為《搜索引擎百度已死》的文章刷屏&#xff0c;文中提到百度搜索有一半以上會指向百度自家產品&#xff0c;尤其百…

Vuex 學習筆記

Vuex 是什么&#xff1f; Vuex 是一個專為 Vue.js應用程序開發的狀態管理模式。由于SPA應用的模塊化&#xff0c;每個組件都有它各自的數據&#xff08;state&#xff09;、視圖&#xff08;view&#xff09;和方法&#xff08;actions&#xff09;&#xff0c;當項目內容越來越…

xdf文檔怎么轉換為pdf_如何將PDF文件和圖像轉換為Google文檔文檔

xdf文檔怎么轉換為pdfYou probably know you can create and edit documents with Google Docs, but you can edit more than just .doc files. Google Drive can also convert any PDF, JPG, PNG, or GIF into a document with fully editable text. Here’s how. 您可能知道可…

在現代 Windows 上使用經典 Windows 2000、XP、Vista 任務欄

你好&#xff0c;這里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;實用的工具和組件&#xff0c;希望對您有用&#xff01;前言您第一次使用的 Windows 是哪個版本的&#xff1f;我最早使用的 Windows XP&#xff0c;然后再經過 XP、7、8/8.1 、Windows 10&a…

oracle sys可以登錄,system權限不足,解決方法

今天在自己電腦上安裝了oracle 11g&#xff0c;安裝成功后發現 sys 可以正常登錄。system 無法登錄&#xff0c;顯示 ORA-01031: insufficient privileges(權限不足) select * from v$pwfile_users; 查看有sysdba權限的用戶 grant sysdba to system; 給system 授權sysdba權限…