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

1的版本更多的是整合，按照模塊來區(qū)分，并沒有做更細(xì)的劃分，而2的版本中，在創(chuàng)建時(shí)模塊組件時(shí)就已經(jīng)有了很好的區(qū)分，每個(gè)模塊單獨(dú)管理各自的組件，在組件中也是各自管理自己的樣式，效果。

在以往1的版本中，要整合路由是十分容易的，無論是一級(jí)或者二級(jí)路由都可以寫在一個(gè)文件中

但是在2中則是將路由寫在上層模塊中，一般app為主模塊，定義一個(gè)app-routing.module.ts的主路由。

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

這里就從創(chuàng)建項(xiàng)目開始：

第一步：創(chuàng)建一個(gè)基于angular-cli的項(xiàng)目

ng new project-name //項(xiàng)目的名稱

創(chuàng)建完成后就是一個(gè)基本的項(xiàng)目框架，其中包括根模塊、根組件等，在根模塊中，原本所定義的路由是在其中的，但在一般的工程項(xiàng)目中，更多的習(xí)慣于將路由重構(gòu)為模塊。

詳細(xì)可參考Angular 2 文檔高級(jí)教程中的>路由與導(dǎo)航，

第二步：此時(shí)可以創(chuàng)建一個(gè)app-routing.module.ts 文件來放總路由，其中的redirectTo為打開項(xiàng)目時(shí)的路由定向。

第三步：創(chuàng)建一級(jí)模塊，在項(xiàng)目中打開命令窗口，輸入

ng g module my-new-module //模塊名稱

假設(shè)此處我輸入的為ng g module user，則會(huì)直接生成以下這些文件

此時(shí)在app.module.ts 中也會(huì)生成

第四步：創(chuàng)建組件

ng g component my-new-component //組件名稱

這里我創(chuàng)建了兩個(gè)組件分別叫做usermanagement & adduser，同樣生成以下文件

在user.module.ts中也會(huì)生成二級(jí)組件

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

仍然是寫在user.module.ts 中，在注入組件之后，寫入二級(jí)路由forChild，此處必不可少的是path的空白鏈接?。〔蝗粫?huì)報(bào)user的錯(cuò)，相當(dāng)于一個(gè)父層的定向

還有就是最后所顯示的位置，一級(jí)路由就寫在app.component.html中

二級(jí)路由則寫在對(duì)應(yīng)的父層頁(yè)面上，我這里就是寫在user.component.html中

基本的步驟就是這些，在長(zhǎng)期使用Angular 1之后，一直改不過來思維，但其實(shí)Angular 2的版本更為清晰的告訴我們每個(gè)模塊所管理的內(nèi)容，更容易掌握。

以上這篇Angular2之二級(jí)路由詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論