Angular 自定义模块

无忧岛

创建自定义模块

ng g module mymodule

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

//angular内置的模块
import { FormsModule } from '@angular/forms';

//angualr内置的模块
import { HttpClientModule } from '@angular/common/http';

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';



import { ProductModule } from './module/product/product.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NewsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    UserModule,
    ProductModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

user.moudle.ts

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

import { CommonService } from './services/common.service';

import { ProfileComponent } from './components/profile/profile.component';
import { AddressComponent } from './components/address/address.component';
import { OrderComponent } from './components/order/order.component';
import { UserComponent } from './user.component';


@NgModule({

  /*user模块里面的组件*/
  declarations: [ProfileComponent, AddressComponent, OrderComponent, UserComponent], 
  
  exports:[UserComponent,AddressComponent],  /*暴露组件 让其他模块里面可以使用暴露的组件*/

  providers:[CommonService],
  imports: [
    CommonModule
  ]
})
export class UserModule { }

 

最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！

来源：https://www.cnblogs.com/loaderman/p/10916561.html