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

复制代码

目录结构大致如下：

。

如果有疑问，欢迎大家在下方进行评论。