Angular2之二級路由

2016年11月25日。


寫了一陣子的Angular 2 現在還是覺得更喜歡Angular 1的版本。

1的版本更多的是整合,按照模塊來區分,並沒有做更細的劃分,而2的版本中,在創建時模塊組件時就已經有了很好的區分,每個模塊單獨管理各自的組件,在組件中也是各自管理自己的樣式,效果。

在以往1的版本中,要整合路由是十分容易的,無論是一級或者二級路由都可以寫在一個文件中

但是在2中則是將路由寫在上層模塊中,一般app爲主模塊,定義一個app-routing.module.ts的主路由。


基本的Angular 2 入門在前面一篇裏面也有所提及

這裏就從創建項目開始:

第一步:創建一個基於angular-cli的項目

ng new project-name   //項目的名稱

創建完成後就是一個基本的項目框架,其中包括根模塊、根組件等,在根模塊中,原本所定義的路由是在其中的,但在一般的工程項目中,更多的習慣於將路由重構爲模塊。

詳細可參考Angular 2 文檔高級教程中的>路由與導航,

第二步:此時可以創建一個app-routing.module.ts 文件來放總路由,其中的redirectTo爲打開項目時的路由定向。


第三步:創建一級模塊,在項目中打開命令窗口,輸入

ng g module my-new-module  //模塊名稱
假設此處我輸入的爲ng g module user,則會直接生成以下這些文件


此時在app.module.ts 中也會生成


第四步:創建組件

ng g component my-new-component  //組件名稱
這裏我創建了兩個組件分別叫做usermanagement & adduser,同樣生成以下文件


在user.module.ts中也會生成二級組件


第五步:書寫模塊中的路由配置

仍然是寫在user.module.ts 中,在注入組件之後,寫入二級路由forChild,此處必不可少的是path的空白鏈接!!不然會報user的錯,相當於一個父層的定向


還有就是最後所顯示的位置,一級路由就寫在app.component.html中


二級路由則寫在對應的父層頁面上,我這裏就是寫在user.component.html中





基本的步驟就是這些,在長期使用Angular 1之後,一直改不過來思維,但其實Angular 2的版本更爲清晰的告訴我們每個模塊所管理的內容,更容易掌握。


ok

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章