模块
- 创建模块
- 挂载模块

模块

创建模块

在src/app中创建module文件夹，并在其中创建user模块

创建user组件时，angular会自动创建一个user文件夹

ng g module module/user

新增的模块包含以下文件：

user.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class UserModule { }

在user模块中创建一个components文件夹，并在components文件夹中创建user模块下的组件profile
```
ng g component module/user/components/profile
```

此时创建的profile组件会被自动引入user.module.ts，而没有引入到app.module.ts。

为user模块创建自己的根组件user
```
ng g component module/user
```

为user模块创建服务common

ng g service module/user/services/common

将创建好的common服务添加到user.module.ts的providers中

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProfileComponent } from './components/profile/profile.component';
import { UserComponent } from './user.component';
import { CommonService } from './services/common.service';
@NgModule({
  declarations: [ProfileComponent, UserComponent],
  providers: [CommonService],  // 将common服务添加到user模块中
  imports: [
    CommonModule
  ]
})
export class UserModule { }

挂载模块

将user模块挂载到根模块后，user组件中使用export暴露的组件便可以在根组件中直接使用

将user模块中的user组件暴露出去 ```typescript import { NgModule } from ‘@angular/core’; import { CommonModule } from ‘@angular/common’; import { ProfileComponent } from ‘./components/profile/profile.component’; import { UserComponent } from ‘./user.component’;

import { CommonService } from ‘./services/common.service’;

@NgModule({ declarations: [ProfileComponent,UserComponent], providers: [CommonService], exports: [UserComponent], // 将user模块的user组件暴露出去 imports: [ CommonModule ] }) export class UserModule { }


2. 
在根模块app.module.ts中引入user模块
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { NewsComponent } from './components/news/news.component';
import { UserModule } from './module/user/user.module';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NewsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    UserModule  // 引入user模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在app.module.ts的根模块下的app组件的app.component.html中直接使用user模块暴露的组件user ```html

```

前端笔记

18-模块创建挂载

模块

创建模块

挂载模块