《Angular項目實戰(zhàn)》課件-CORE06

項目六--智慧工廠氣報表模塊合作開拓責(zé)任企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務(wù)實施任務(wù)需求任務(wù)總結(jié)03Optionhere04Optionhere任務(wù)技能任務(wù)需求任務(wù)需求學(xué)習(xí)目標學(xué)習(xí)目標了解氣報表模塊的開發(fā)流程學(xué)習(xí)氣報表模塊所需路由知識掌握Angular路由配置具有使用Angular路由實現(xiàn)頁面跳轉(zhuǎn)的能力學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入為了能夠更加方便、快捷的統(tǒng)計氣體質(zhì)量數(shù)據(jù)，智慧工廠項目設(shè)計了氣報表模塊，氣報表模塊將數(shù)據(jù)以表格的形式展現(xiàn)。根據(jù)氣報表模塊可以快速查出某一時刻氣體報警的詳細信息。本項目主要是通過實現(xiàn)智慧工廠的氣報表模塊來學(xué)習(xí)Angular路由的配置與使用。功能描述功能描述使用Bootstrap+Angular實現(xiàn)智慧工廠氣報表模塊。使用Bootstrap相關(guān)知識設(shè)計智慧工廠氣報表模塊通過Angular數(shù)據(jù)綁定實現(xiàn)表格數(shù)據(jù)的顯示通過路由的配置進行頁面的跳轉(zhuǎn)及傳參企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實現(xiàn)效果實現(xiàn)效果PRESENT企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)技能任務(wù)技能任務(wù)技能01Angular路由概述02Angular路由基本用法03Angular路由的使用企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular路由概述Angular路由可以實現(xiàn)不同模塊的組件協(xié)同工作。實現(xiàn)從一個視圖導(dǎo)航到另一個視圖，且可以附加可選參數(shù)傳遞給組件，通過不同的URL跳轉(zhuǎn)到不同的頁面(HTML)。Angular路由概述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular路由基本用法配置Angular路由：Routes（定義路由配置）、RouterOutlet（標記放置路由的內(nèi)容位置）、RouterLink指令（創(chuàng)建路由鏈接）01Angular路由基本用法企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）在app.module.ts文件中，從@angular/router庫中入

RouterModule02導(dǎo)入RouterModule企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）使用

RouterModule.forRoot()來為應(yīng)用程序提供使用路由必需的依賴RouterModule

對象提供了兩個靜態(tài)的方法forRoot()

、

forChild()

（2）配置路由需要用到Routers數(shù)組，數(shù)組的每一個元素即為一個路由配置項path（path不能用斜線開頭）屬性定義路由的匹配路徑component

屬性定義路由匹配時需要加載的組件03配置路由企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）RouterOutlet指令是用來標記路由顯示視圖的位置，指定在頁面的哪一位置渲染路由的內(nèi)容。<router-outlet></router-outlet>//此處呈現(xiàn)component04調(diào)用RouterOutlet指令企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）使用routerLink指令。當(dāng)在標簽上綁定routerLink指令，用戶通過點擊標簽，來進行導(dǎo)航<ul><li><a[routerLink]="['home']">Home</a></li><li><a[routerLink]="['about']">About</a></li></ul>05調(diào)用routerLink指令企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular路由的使用（1）路由傳參（2）重定向路由（3）子路由（4）輔助路由（5）路由守衛(wèi)01Angular路由的使用企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）在HTML模板中添加屬性[queryParams]，使其攜帶參數(shù)（2）在ts文件中，創(chuàng)建變量來接收傳遞過來的參數(shù)，使用ActivatedRoute服務(wù)保存當(dāng)前路由的信息，并使用參數(shù)快照（snapshot屬性）接收路由傳遞過來的參數(shù)02普通方式傳參企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）在app-routing.module.ts中修改path屬性值使其攜帶參數(shù)（2）在HTML模板添加傳遞參數(shù)（3）使用參數(shù)快照（snapshot屬性）獲取參數(shù)值03在path中傳遞參數(shù)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）主要作用是當(dāng)訪問一個特定地址時，將其重定向到另一個指定的地址。重定向路由的配置如下：{path:'要定向的路徑',redirectTo:'要定向到的目標路由'，pathMatch:'匹配方式'}04重定向路由企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）子路由是嵌套在主路由里，由children表明這是子路由且可以無限循環(huán)嵌套。05子路由企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）在主路由的插座定義一個輔助路由插座。添加一個name屬性用來指定輔助路由顯示的組件（2）配置入口參數(shù)。添加outlets屬性，該對象里面?zhèn)魅肷鲜龅膎ame屬性值（3）配置輔助路由路徑。添加outlet屬性，指定該路由顯示在對應(yīng)名稱的路由插座上06輔助路由企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）允許從一個頁面跳轉(zhuǎn)到另一個頁面時執(zhí)行一些指定的邏輯，并根據(jù)執(zhí)行的結(jié)果來決定是否跳轉(zhuǎn)。07路由守衛(wèi)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)實施任務(wù)實施第一步第二步第三步編寫氣報表組件，其為一個表格，并設(shè)置其樣式編寫氣報表詳情組件，通過id把數(shù)據(jù)傳入詳情頁編寫質(zhì)量指數(shù)組件，并設(shè)置其樣式企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）氣報表在命令窗口輸入以下命令創(chuàng)建路由文件、氣報表、氣報表詳情、存儲數(shù)據(jù)的服務(wù)組件；并注入服務(wù)文件在服務(wù)文件定義一個類并填充數(shù)據(jù)在HTML模板中，設(shè)置氣報表，表格數(shù)據(jù)通過使用NgFor指令遍歷循環(huán)顯示在對應(yīng)界面的ts文件，使用gerProducts()方法從服務(wù)中獲取數(shù)據(jù)氣報表詳情配置路由。當(dāng)點擊查看詳情時，通過id把數(shù)據(jù)傳入詳情頁在服務(wù)文件中寫入根據(jù)商品id在數(shù)組找到對應(yīng)商品的方法設(shè)置氣報表詳情界面任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述