Angular2入门之新建模块与组件

Angular2新建模块和其中的组件的需要注意一些问题。
  本文新建一个LayoutModule模块，目录如下图：

1. 首先，创建文件夹如图中所示

+layout
+++main-layout
+++navigation

2. 在layout文件夹下创建LayoutModule

import { NgModule } from '@angular/core';
import { MainLayoutComponent } from './main-layout/main-layout.component';
import { NavigationComponent } from './navigation/navigation.componennt';

@NgModule({
    imports: [],
    declarations: [
        MainLayoutComponent,
        NavigationComponent
    ],
    exports: []
})
export class LayoutModule { }

需要使用import将模块包含的组件都引入进来，然后在declarations中声明。

3.创建本模块中的组件以及相应的模板

• MainLayoutComponent的代码如下：

import { Component } from '@angular/core';

@Component({
    selector: 'app-main-layout',
    templateUrl: './main-layout.component.html',
    styleUrls: []
})
export class MainLayoutComponent {}

• main-layout.component.html代码很简单:
  <sa-navigation></sa-navigation> //组件使用同模块中的组件不需要import
• NavigationComponent代码如下：

  import { Component } from '@angular/core';
  
  @Component({
      selector: 'sa-navigation',
      templateUrl: 'navigation.component.html',
      styleUrls: []
  })
  
  

export class NavigationComponent {}
```

• 在navigation.component.html中，我们只写一句话
  Hello, world!

4.将模块引入AppModule

app.module.ts中代码如下：

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { LayoutModule } from './layout/layout.module'; //这里需要import

@NgModule({
declarations: [
 AppComponent
],
imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 LayoutModule,       //这里需要imports
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
 ```
可以看出，分别在顶部的``import``和``@NgModule``中的``imports``数组中添加新加入的模块。

##5.使用模块中的组件
  使用模块中的组件，我们可以这样使用，在``app.component.html``中通过添加标签使用 ``<app-main-layout></app-main-layout>``
  我们虽然在AppModule中，引入了LayoutModule，但是你查看``layout.module.ts``文件，会发现``exports``数组是空的，也就是LayoutModule没有把这个组件暴露出来，这样AppModule中的组件不能找到``<app-main-layout>``所代表的组件的。
  所以一个模块中的组件想要被其他模块使用，需要在``exports``数组中暴露出去。在``layout.module.ts``中添加``exports``数组。

//layout.module.ts
@NgModule({
imports: [],
declarations: [
MainLayoutComponent,
NavigationComponent
],
exports: [
MainLayoutComponent //新添加的代码
]
})

**注意：**我们在``main-layout.component.html``中使用了``<sa-navigation>``,而没有导入，因为二者是处于同一个模块的，不需要额外导入。

##6.运行结果
  在项目目录下运行``npm start``，打开浏览器，就可以看到“Hello, world!”
##总结：
1. 模块A想要使用新创建的模块B，需要在A模块中导入B，并添加到A模块的``imports``数组中
2. A模块中的组件想要使用B模块中的组件b1，需要在B模块的``exports``数组中添加组件b1,即将其暴露出来。