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 { }
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2019-05-24 10:28 LoaderMan 阅读(1448) 评论(0) 编辑 收藏 举报