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

RouterModule02導入RouterModule企業級卓越人才培養（信息類專業集群）（1）使用

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

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

、

forChild()

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

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