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 { }

复制代码

目录结构大体以下：

。

若是有疑问，欢迎你们在下方进行评论。