W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
本教程提供了關于 Angular 路由器的概要性概述。在本教程中,你將基于基本的路由器配置來探索諸如子路由、路由參數(shù)、惰性加載 NgModule、路由守衛(wèi)和預加載數(shù)據(jù)等功能,以改善用戶體驗。
有關該應用最終版本的有效示例,請參閱現(xiàn)場演練 / 下載范例。
本指南描述了一個多頁路由示例應用程序的開發(fā)過程。在此過程中,它重點介紹了路由器的關鍵特性,比如:
id
?)CanActivate
?守衛(wèi)(檢查路由訪問)CanActivateChild
?守衛(wèi)(檢查子路由訪問)CanDeactivate
?守衛(wèi)(在放棄未保存的更改之前請求許可)Resolve
?守衛(wèi)(預先獲取路由數(shù)據(jù))。NgModule
?CanLoad
?守衛(wèi)(在加載功能模塊的文件之前檢查)本教程的示例應用會幫助“英雄雇傭管理局”找到需要各位英雄去解決的危機。
本應用有三個主要的特性區(qū):
該應用會渲染出一排導航按鈕和和一個英雄列表視圖。
選擇其中之一,該應用就會把你帶到此英雄的編輯頁面。
修改完名字,再點擊“后退”按鈕,應用又回到了英雄列表頁,其中顯示的英雄名已經(jīng)變了。注意,對名字的修改會立即生效。
另外你也可以點擊瀏覽器本身的后退按鈕(而不是應用中的 “Back” 按鈕),這也同樣會回到英雄列表頁。在 Angular 應用中導航也會和標準的 Web 導航一樣更新瀏覽器中的歷史。
現(xiàn)在,點擊危機中心鏈接,前往危機列表頁。
選擇其中之一,該應用就會把你帶到此危機的編輯頁面。危機詳情是當前頁的子組件,就在列表的緊下方。
修改危機的名稱。注意,危機列表中的相應名稱并沒有修改。
這和英雄詳情頁略有不同。英雄詳情會立即保存你所做的更改。而危機詳情頁中,你的更改都是臨時的 —— 除非按“保存”按鈕保存它們,或者按“取消”按鈕放棄它們。這兩個按鈕都會導航回危機中心,顯示危機列表。
單擊瀏覽器后退按鈕或 “Heroes” 鏈接,可以激活一個對話框。
你可以回答“確定”以放棄這些更改,或者回答“取消”來繼續(xù)編輯。
這種行為的幕后是路由器的 ?CanDeactivate
?守衛(wèi)。該守衛(wèi)讓你有機會進行清理工作或在離開當前視圖之前請求用戶的許可。
?Admin
?和 ?Login
?按鈕用于演示路由器的其它能力,本章稍后的部分會講解它們。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: