在 app.module.ts 引入模塊
user 模塊暴露出 要被外界訪問到的組件
在根模板 app.component.html 里引入
<app-user></app-user>
如果需要在根組件里直接 使用 app-address 組件，也是需要先在 user 模塊 user.module.ts 暴露
/暴露組件 讓其他模塊里面可以使用暴露的組件/
exports:[UserComponent,AddressComponent]
如何在根模塊掛載 product 模塊呢？
同上
創建 user 模塊下的服務
創建
ng g service module/user/services/common
在 user 模塊引入服務
user.module.ts
配置路由實現模 塊懶加載
創建模塊：
ng g module module/user --routing ng g module module/article --routing ng g module module/product --routing
創建組件：
ng g component module/user ng g component module/user/components/profile ng g component module/user/components/order ng g component module/article ng g component module/article/components/articlelist ng g component module/article/components/info ng g component module/product ng g component module/product/components/plist ng g component module/product/components/pinfo
這里先以article為例講解：
angular配置懶加載
在angular中路由即能加載組件又能加載模塊，而我們說的懶加載實際上就是加載模塊，目前還沒有看到懶加載組件的例子。
加載組件使用的是component關鍵字
加載模塊則是使用loadChildren關鍵字
1. 在app文件夾下 新建 app-routing.module.ts
內容如下：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
forRoot是用在根模塊加載路由配置，
而forChild是用在子模塊加載路由配置。
注意：需要在根模板 app.module.ts里導入AppRoutingModule模塊
import { AppRoutingModule } from './app-routing.module';
...
imports: [
AppRoutingModule,
]
2. 在子模塊里配置路由
在\\\\module\\\\article\\\\article-routing.module.ts里配置路由
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// import {ArticleComponent} from './article.component';
const routes: Routes = [
// {
// path:'',
// component:ArticleComponent
// }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ArticleRoutingModule { }
也可以在新建項目的時候 就把路由的模塊加上，可以省去上面的 配置
在 article模塊的 article-routing.module.ts配置路由
.....
import {ArticleComponent} from './article.component';
const routes: Routes = [
{
path:'',
component:ArticleComponent
}
];
......
3. 在app的路由模塊進行配置路由
const routes: Routes = [
{
path:'article',
//寫法一：
loadChildren:'./module/article/article.module#ArticleModule'
//寫法二
// loadChildren: () => import('./module/user/user.module').then( m => m.UserModule)
},
// {
// path:'user',loadChildren:'./module/user/user.module#UserModule'
// },
// {
// path:'product',loadChildren:'./module/product/product.module#ProductModule'
// },
{
path:'**',redirectTo:'article'
}
];
如果在之前新建模塊的時候沒有加上–routing,，需要配置模塊的路由
product模塊
product的路由：module\\\\product\\\\product-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ProductComponent} from './product.component';
const routes: Routes = [
{
path:'',
component:ProductComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ProductRoutingModule { }
product的模塊：
module\\\\product\\\\product.module.ts
import { ProductRoutingModule } from './product-routing.module';
imports: [
ProductRoutingModule
],
user模塊
user的路由： \\\\module\\\\user\\\\user-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {UserComponent} from './user.component';
const routes: Routes = [
{
path:'',
component:UserComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserRoutingModule { }
user的模塊： \\\\module\\\\user\\\\user.module.ts
import {UserRoutingModule} from './user-routing.module';
imports: [
UserRoutingModule
],
RouterModule.forRoot() 和 RouterModule.forChild()
RouterModule對象為提供了兩個靜態的方法:forRoot()和forChild()來配置路由信息。
RouterModule.forRoot()方法用于在主模塊中定義主要的路由信息，RouterModule.forChild()與 Router.forRoot()方法類似，但它只能應用在特性模塊中。
即根模塊中使用forRoot()，子模塊中使用forChild()。
配置子路由在商品模塊的路由product-routing.module.ts 配置子路由
import { PlistComponent } from './components/plist/plist.component';
import { CartComponent } from './components/cart/cart.component';
import { PinfoComponent } from './components/pinfo/pinfo.component';
const routes: Routes = [
{
path:'',
component:ProductComponent,
children:[
{path:'cart',component:CartComponent},
{path:'pcontent',component:PinfoComponent}
]
},
{path:'plist',component:PlistComponent}
];
在商品模塊的模板product.component.html 添加router-outlet
<router-outlet></router-outlet>
在頁面app.component.html添加菜單，方便跳轉
<a [routerLink]="['/product']">商品模塊</a> <a [routerLink]="['/product/plist']">商品列表</a>
更多編程相關知識，可訪問：編程學習課程！！
更多關于云服務器，域名注冊，虛擬主機的問題，請訪問三五互聯官網：www.shinetop.cn