查看: 49|回复: 0

Angular 自定义模块

[复制链接]

3

主题

0

回帖

0

积分

热心网友

金币
0
阅读权限
220
精华
0
威望
0
贡献
0
在线时间
0 小时
注册时间
2011-12-6
发表于 2019-5-24 10:28:00 | 显示全部楼层 |阅读模式

创建自定义模块

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 { }

 

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

圆梦公社,专注于为全球华人提供纯粹技术交流的地方,请勿发布任何政治及违法的言论。如有相关侵权、举报、投诉及建议等,请发 E-mail:dzh188@hotmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部