Angular4中的共享模塊是什么

這篇文章將為大家詳細講解有關Angular4中的共享模塊是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1. AppModule

@NgModule({  
  declarations: [  
    AppComponent  
  ],  
  imports: [  
    BrowserModule  
  ],  
  exports: [ AppComponent ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }

imports 本模塊聲明的組件模板需要的類所在的其它模塊。
providers 服務的創建者，并加入到全局服務列表中，可用于應用任何部分。
declarations 聲明本模塊中擁有的視圖類。Angular 有三種視圖類：組件、指令和管道。
exports declarations 的子集，可用于其它模塊的組件模板。
bootstrap 指定應用的主視圖（稱為根組件），它是所有其它視圖的宿主。只有根模塊才能設置 bootstrap 屬性。

2. CommonModule

先看一下CommonModule中有什么內容。

common.module.ts代碼

@NgModule({
  imports: [
    NgZorroAntdModule,
    AngularCommonModule
  ],
  declarations: [
    CommonComponent,
    NumberFilterPipe,
    ButtonDirective,
    StepComponent
  ],
  exports: [
    CommonComponent,
    NumberFilterPipe,
    ButtonDirective,
    StepComponent
  ],
  providers: [

  ],
})

我在comon 文件夾中創建了service, pipe, component, directive，但是這個service和這個module沒有任何關系。至于service會在下面說到。然后將 pipe, component, directive輸出，這樣其他模塊才能使用。

3. AngularModule

然后我們需要在其他的模塊中使用這個模塊，就需要import進來。

import { NgModule } from '@angular/core';
import { AngularComponent } from './angular.component';
import {RouterModule, Routes} from '@angular/router';
import {CommonModule as CommonPrivateModule} from '../../common/common.module';
import {CommonModule} from '@angular/common';
import {HttpService} from '../../common/service/http.service';
import {HttpCommonService} from '../../common/service/http-common.service';
import {BrowserModule} from '@angular/platform-browser';

const routes: Routes = [
  {path: '', component:  AngularComponent}
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    CommonPrivateModule
  ],
  declarations: [AngularComponent],
  providers: []
})
export class AngularModule { }

因為CommonModule與系統內的module重名，所以我重命名為CommonProvateModule。這樣我們就可以在AngularModule中使用共享模塊的內容。

angular.component.html

<p>
  <app-step [stepString]="['common component']"></app-step>
  <button appButton> common directive</button> <br>
  common pipe: {{1 | numberFilter}}
</p>

這個html文件中我使用了之前創建的 StepComponent, NumberFilterPipe,  ButtonDirective。

4. Service

service前面在Common的文件加下，但是沒有在CommonModule provide。這是為什么呢，因為service靠Angular 的依賴注入體系實現的，而不是模塊體系。如果我們在CommonModule provide，那么我們在各個模塊使用的service不是一個實例，而是多個實例。下面我們就來測試一下。

先說一下例子的模塊結構， AppModule，HomeModule(AppModule的子模塊)， AngularModule(HomeModule的子模塊)。然后分別在三個模塊中引入CommonModule。

修改一下上面的CommonModule，將HttpCommonService 提供出去。

@NgModule({
  imports: [
    NgZorroAntdModule,
    AngularCommonModule
  ],
  declarations: [
    CommonComponent,
    NumberFilterPipe,
    ButtonDirective,
    StepComponent
  ],
  exports: [
    CommonComponent,
    NumberFilterPipe,
    ButtonDirective,
    StepComponent
  ],
  providers: [
    HttpCommonService
  ],
})

HttpCommonService

import { Injectable } from '@angular/core';
import {Http, Request, RequestOptions} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {NzMessageService} from 'ng-zorro-antd';

@Injectable()
export class HttpCommonService {

  private testService: number;

  constructor(public httpService: Http, private _message: NzMessageService) {
  }

  set(number) {
    this.testService = number;
  }

  get() {
    return this.testService;
  }
}

這里在service內部有兩個方法，一個用于設置變量testService，一個用于取這個變量。

AppComponent

export class AppComponent implements OnInit {

  title = 'app';

  constructor(private httpCommonService: HttpCommonService) {}

  ngOnInit(): void {
    console.log('appmodule 取值之前的number:' + this.httpCommonService.get());
    this.httpCommonService.set(1);
  }
}

HomeCompoent

export class HomeComponent implements OnInit {

  constructor(private httpCommonService: HttpCommonService) { }

  ngOnInit() {
    console.log('homemodule 取值之前的number:' + this.httpCommonService.get());
    this.httpCommonService.set(2);
  }
}

AngularComponent

export class AngularComponent implements OnInit {
  firstString: string;

  constructor(private httpCommonService: HttpCommonService) { }

  ngOnInit() {
    console.log('angularmodule 取值之前的number:' + this.httpCommonService.get());
  }
}

最后看一下控制臺的輸出：

可以看到service內部的變量每一次都是一個新值。

然后我們在將CommonModule中的service去掉，就是這個公共模塊不提供service。然后在將AppModule修改一下，提供HttpCommonService。 我們再看一下頁面控制臺的輸出。

可以看到現在是一個實例，而且service內部的變量也是緩存起來的。

所以對于service我們還是放在模塊中去提供，不要放在共享模塊中了。

至于頁面的模板可以訪問angular - blank .

關于“Angular4中的共享模塊是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。