angular2項目關於主頁結構分析

這裏須要弄清楚兩個問題：

一：主頁模塊如何加載進來

angular2的根模塊應用加載以後便會根據根模塊路由信息來加載主頁模塊

export const appRoutes=[
    {
        path:'',
        redirectTo:'home',
        pathMatch:'full'
    },
  {
    path:'home',
    loadChildren:'./home/home.module#HomeModule'
  },

如上：path:" " 表明該模塊加載後自動加載指定的組件。這裏爲何不直接{path：' '，loadChildren:'./home/home.module#HomeMoule'} 呢？這個也能實現自動載入主頁模塊的功能。

{path:'home',loadChildren:'./home/home.module#HomeModule'}    --------   這至關於將home模塊抽象出來並取名字爲home，這樣其餘地方若是用到了這個模塊，不管是用戶點擊仍是某個模塊將home當作子模塊來自動加載，均可以調用名爲home的path。

{path：' '，loadChildren:'./home/home.module#HomeMoule'}  -------  至關於匿名函數自動調用，{path:'home',loadChildren:'./home/home.module#HomeModule'}  ---------至關於封裝好的有名字的函數，任何地方均可以重用。

 

接下來項目根據loadChildren的路徑載入home.modules.ts

import { RouterModule } from '@angular/router';
import { HomeComponent }   from './home.component';       /*加載主頁組件*/
import { SocialChannelComponent } from './social-channel/social-channel.component'; /*加載社交媒體組件*/
import { SitestatComponent } from '../sitestat/sitestat.component';    /*加載計時，計數組件*/
import { OnlineContactComponent } from './online-contact/online-contact.component'; /*加載qq羣組件*/

import {homeRoutes} from './home.routes';   /*加載主頁路由*/

@NgModule({
    imports: [
        SharedModule, /*引入公用模塊*/
        RouterModule.forChild(homeRoutes)   /*引入路由模塊*/
    ],
    exports: [],
    declarations: [
        HomeComponent,                /*主頁組件*/
        SocialChannelComponent,        /*社交媒體組件，跳轉到第三方頁面*/
        SitestatComponent,          /*計時，計數組件*/
        OnlineContactComponent       /*qq羣組件*/
    ],
    providers: [],
})
export class HomeModule {}

下面是home.component.ts裏面的內容，這裏重點題下：selector屬性的功能是讓組件加載到父組件裏面指定的位置。這裏的app-home並非id屬性，而是dom元素的名稱<app-home></app-home>

 

二：主頁裏面子組件的動態和靜態加載形式------2種組件載入方式

主頁視圖裏面加載組件一個是經過路由組件加載子組件，一個是直接將子組件做爲dom元素，經過對這些自定義的元素進行編譯來加載對應的子視圖。

 

靠路由加載的組件，是有路由配置的。它關聯存在於整個項目的組件樹中，通常將主要內容或者大的組件由路由發起網絡請求從而自動加載到父視圖中。只須要一個<router-outer></router-outer>這樣一個路由組件根據該模塊的路由配置來動態的載入指定的組件。

這樣設計即可根據實際狀況作實際分析載入實際須要的組件。而在開發的時候就沒必要知道該視圖須要加載哪些組件了。

一些事先定義在模塊裏面的組件經過在父視圖裏面充當DOM元素，至關於該模塊的指令同樣，不須要再次請求服務器下載組件。這某種意義上算是靜態的載入指令。這種方式須要程序員清楚的知道該頁面須要哪些具體的功能，而後將對應的組件名寫在視圖裏面。

 

如下爲home組件的路由配置信息(包括子組件的路由信息)

import { RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';   /*加載主頁組件模塊對象*/

export const homeRoutes=[
    {
        path:'',  /*path爲空表明：路由到這個模塊的時候自動將下面組件加載顯示在頁面*/
        component:HomeComponent,
        children:[{ /*這個組件裏面能夠根據如下路由信息顯示不一樣的子組件(子視圖)*/
            path:'',  /*這表明加載主組件初始狀況時自動加載下面這個子組件*/
            loadChildren:'../post/post.module#PostModule'
        }]
  }
];

children是一個數組，裏面是子組件的路由配置信息。