Angular6筆記之全局組件

在使用 Angular6 作項目的時候，組件只能在一個模塊內進行聲明，也就是說，在默認狀況下，組件編寫完成後都得在某個模塊先根據文件路徑引入該組件，而後在 NgModule 的參數 declarations 進行添加，就能夠在該模塊的其餘組件中進行使用了，注意，只能是 該模塊 中。

那麼，問題來了，咱們的項目不可能只有一個模塊吧，若是我有一些組件是須要全局做用的呢？這時候就是 NgModule 的 exports 屬性登場的時候了。咱們知道，imports 屬性用來導入 可聲明的類 ，而 exports 就能夠用來導出 可聲明的類 。

注：可聲明的類一般指的就是 組件、指令和管道。

因此，咱們只須要新建一個模塊，而後在該模塊中對 可聲明的類 進行聲明（declarations），而後導出（exports），以後只須要在其餘模塊導入該模塊，就能夠使用這些 可聲明的類 了。

代碼實現：

# app-common.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BaseButtonComponent } from './components/base-button/base-button.component'

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    BaseButtonComponent
  ],
  exports: [
    BaseButtonComponent
  ]
})
export class AppCommonModule { }

# app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppCommonModule } from './app-common/app-common.module'

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppCommonModule
  ],
  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

複製代碼

目錄結構大體以下：

。

若是有疑問，歡迎你們在下方進行評論。