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是一个数组，里面是子组件的路由配置信息。