Angular学习笔记80：Angular共享模块

有时候在项目中，会有一些组件需要经常用到，比如像下面这种二级标题

这种二级标题可能会整个应用都会用到，所以需要将它作为一个共通的组件来使用。

制作一个共享模块

新建一个component目录

• 新建一个component目录，在app目录下执行命令：

mkdir component

• 切换到component目录

cd component

创建二级标题组件

执行命令：ng g c secondaryTitle

➜  component git:(master) ✗ ng g c secondaryTitle 
CREATE src/app/component/secondary-title/secondary-title.component.less (0 bytes)
CREATE src/app/component/secondary-title/secondary-title.component.html (34 bytes)
CREATE src/app/component/secondary-title/secondary-title.component.spec.ts (685 bytes)
CREATE src/app/component/secondary-title/secondary-title.component.ts (305 bytes)
UPDATE src/app/app.module.ts (1909 bytes)

使用Angular/cli创建的项目因为component目录中上级模块就是 app.module，所以会自动更新到 app.module的 declarations数组中。

但是这里并不是所需要的结果，所以在这里将 secondary-title这个组件从 app.module的 SecondaryTitleComponent数组中删除并删除其引用。

修改 SecondaryTitleComponent

修改SecondaryTitleComponent模版文件

<div class="divTitle">
  <h3><span class="setThemeTitle"></span>
    <ng-content></ng-content>
  </h3>
</div>

修改SecondaryTitleComponent样式文件

div {
  overflow: hidden;

  h3 {
    font-size: 14px;
    margin: 10px 0;
    text-indent: 12px;
    position: relative;
    font-weight: 600;

    span {
      position: absolute;
      left: 0;
      top: 4px;
      height: 14px;
      width: 5px;
      background: #56bfa1;
    }
  }
}

创建一个共通的模块

在component目录下执行命令：ng g m components

➜  component git:(master) ✗ ng g m components
CREATE src/app/component/components/components.module.ts (194 bytes)

将 SecondaryTitleComponent导入到 components.module的 declarations数组 和 exports数组中,

修改后的 ComponentsModule如下：

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {SecondaryTitleComponent} from '../secondary-title/secondary-title.component';

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

在其他模块中使用 SecondaryTitleComponent 组件

其他模块中引入ComponentsModule

现在在 PagesModule中使用 SecondaryTitleComponent ，需要将ComponentsModule放置到 PagesModule 的 imports数组中。

修改后的：

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

import {PagesRoutingModule} from './pages-routing.module';
import {NgZorroAntdModule} from 'ng-zorro-antd';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

...
import {ComponentsModule} from '../component/components/components.module';

@NgModule({
  declarations: [
    ...,
    StyleDemoComponent,
    StyleDemoChildComponent,
    OperatingDOMComponent,
    DynamicComComponent
  ],
  imports: [
    CommonModule,
    NgZorroAntdModule,
    FormsModule,
    ReactiveFormsModule,
    PagesRoutingModule,
    ComponentsModule,
  ]
})
export class PagesModule {
}

在引入的模块中的组件里使用 SecondaryTitleComponent

修改 OperatingDOMComponent 组件的模版文件：

<h1>Render2 操作DOM</h1>
<app-secondary-title>
  在OperatingDOMComponent 中使用 secondary-title
</app-secondary-title>
<nz-divider nzText="创建一个DOM"></nz-divider>
<div #demo></div>
<button nz-button (click)="restDemoApi1()">createElement</button>

...
...

<nz-form-item>
  <nz-form-control nzSpan="4" nz-col>
    <label>
      <input nz-input #demoInput>
    </label>
  </nz-form-control>
  <nz-form-control nzSpan="4" nz-col>
    <button nz-button (click)="handleSetProperty()">添加 Property</button>
  </nz-form-control>
</nz-form-item>

保存运行，会发现：

最后总结：

• 一个组件只能在包含在一个模块中
• 在做共享模块时根据模块中的组件使用频率的高低进行分类，避免模块体积过大，继而导致页面加载缓慢
• 如果组件较多，可以做成一个组件为一个模块来使用