要進入到首頁之前,哪些模塊跟路由需要先設定。
-src
|-app
|-app.component.css
|-app.component.html
|-app.component.ts
...
|-core
...
|-core-routing.module.ts
|-core.module.ts
|-model
|-data
|-admin.ts
|-...
|-base.ts
|-tab.ts
|-cms
|-admin
|-...
|-customer
|-...
|-index
|-...
|-order
|-...
|-product
|-...
|-user
|-...
|-cms-resolve.ts
|-cms-routing.ts
首先記得在模塊註冊相關。
@NgModule({
imports: [SharedModule, TabModule, CoreRoutingModule],
exports: [CoreComponent],
declarations: [CoreComponent, MenuComponent],
providers: [CoreService]
})
export class CoreModule {
constructor(
@Optional()
@SkipSelf()
parentModule: CoreModule
) {
throwIfAlreadyLoaded(parentModule, "CoreModule");
}
}
function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
if (parentModule) {
throw new Error(
`${moduleName} has already been loaded`
);
}
}
此
CoreModule
宣告自己是單例模式
,如果CoreModule
不存在就會新創一個,
已經有的話就會用原本的。
const routes: Routes = [
{
path: "cms",
component: CoreComponent,
canActivate: [GuardService],
children: CmsRouting
},
{ path: "", redirectTo: "cms", pathMatch: "full" }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
providers: [CmsResolver]
})
export class CoreRoutingModule {}
import { Routes } from "@angular/router";
export const CmsRouting: Routes = [
{
path: "index",
loadChildren: "src/app/cms/index/index.module#IndexModule"
},
{
path: "user",
loadChildren: "src/app/cms/user/user.module#UserModule"
},
{
path: "admin",
loadChildren: "src/app/cms/admin/admin.module#AdminModule"
},
{
path: "customer",
loadChildren: "src/app/cms/customer/customer.module#CustomerModule"
},
{
path: "product",
loadChildren: "src/app/cms/product/product.module#ProductModule"
},
{
path: "order",
loadChildren: "src/app/cms/order/order.module#OrderModule"
}
];
import { IModel } from "./data";
export interface IPage {
pageIndex: number;
pageSize: number;
length: number;
}
export interface IData {
res: IModel | IModel[];
errorcode: number;
}
IPage
物件會相對應 Angular Materia 的分頁物件。先簡單測試可以到首頁。
-src
|-app
|-cms
|-index
|-index-routing.module.ts
|-index.component.css
|-index.component.html
|-index.component.ts
|-index.module.ts
index.component.html
:<span>hello</span>
index-routing.module.ts
:const routes: Routes = [
{
path: '',
component: IndexComponent,
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class IndexRoutingModule {}
index.module.ts
:@NgModule({
imports: [SharedModule, IndexRoutingModule],
declarations: [IndexComponent],
exports: [IndexComponent],
providers: []
})
export class IndexModule {}
https://stackblitz.com/edit/ngcms-corecomp
一開始會跳出提示視窗顯示fail為正常,
請先從範例專案裡下載或是複製db.json
到本地端,
並下指令:
json-server db.json
json-server開啟成功後請連結此網址:
https://ngcms-corecomp.stackblitz.io/cms?token=bc6e113d26ce620066237d5e43f14690