3.3 - 共享模块

• 共享模块当中放置的是 Angular 应用中模块级别的需要共享的组件或逻辑

  创建共享模块

  ng g m shared

  创建共享组件

  ng g c shared/components/Layout

  在共享模块中导出共享组件

  ```typescript // src/app/shared/shared.module.ts import { NgModule } from ‘@angular/core’; import { CommonModule } from ‘@angular/common’; import { LayoutComponent } from ‘./components/layout/layout.component’;

@NgModule({ declarations: [ LayoutComponent ], imports: [ CommonModule ], // 导出共享组件 exports: [ LayoutComponent ] })

export class SharedModule { }

<a name="xw48k"></a>
### 在根模块中导入共享模块
```typescript
// src/app/app.module.ts
@NgModule({
    declarations: [AppComponent],
    // 导入共享组件
    imports: [SharedModule],
    bootstrap: [AppComponent]
})
export class AppModule {}

在根组件中使用 Layout 组件

// src/app/app.component.html
<div>app works</div>
<app-layout></app-layout>