angular2嵌套路由不工作,没有错误报告,但空白页
请帮我检查一下代码…没有编译错误,否则在npm start
后cli输出,但浏览器看起来是一个空白页面。 我一遍又一遍地检查,但仍然找不到有什么问题。
PS:我是一个新生在angular2 …
app.module
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AdminModule, WaiterModule, CookModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
APP-routing.module
const appRoutes: Routes = [ { path: "", redirectTo: "/admin", pathMatch:"full" } ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes, { enableTracing: true }) ], exports: [RouterModule] }) export class AppRoutingModule { }
app.component.html
<div style="text-align:center"> <h1> Welcome to Angular2 </h1> </div> <router-outlet></router-outlet>
admin.module
@NgModule({ declarations: [ AdminComponent, DishBoardComponent, UserBoardComponent, StatisticsBoardComponent, AdminSiderBarComponent ], imports: [ CommonModule, AdminRoutingModule ] }) export class AdminModule { }
pipe理员-routing.module
const adminRoutes: Routes = [ { path: "admin", component: AdminComponent, children: [ { path: "", redirectTo: "/checkout",pathMatch:"full" }, { path: "checkout", component: CheckoutBoardComponent }, { path: "dish", component: DishBoardComponent }, { path: "user", component: UserBoardComponent }, { path: "statistics", component: StatisticsBoardComponent } ] } ]; @NgModule({ imports: [ RouterModule.forChild(adminRoutes) ], exports: [RouterModule] }) export class AdminRoutingModule { }
admin.component.html
<p> admin works! </p> <a routerLink="/checkout">Checkout</a> <a routerLink="/user">User</a> <a routerLink="/dish">Dish</a> <a routerLink="/statistics">Statistics</a> <router-outlet></router-outlet> <br> footer
看起来你没有在你的app.routing.module中定义admin
路线及其子项 。
你应该得到它的工作
app.module.ts :
无需在这里导入其他模块。 只需导入AppRoutingModule
。
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; /** App Modules **/ import { AppRoutingModule } from './app.routing.module'; /** App Components**/ import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
app.routing.module.ts :
加载admin.module
路由并将它们传递给admin
路由。
import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; /** App Modules**/ import { AdminModule} from './admin/admin.module'; export function exportAdminModule() { return AdminModule; } const appRoutes: Routes = [ { path: 'admin', loadChildren: exportAdminModule }, { path: '', redirectTo: '/admin', pathMatch: 'full' }, { path: '**', redirectTo: '/admin' } ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes, { enableTracing: true }) ], exports: [RouterModule] }) export class AppRoutingModule { }
admin.module.ts :
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; // Import your components /** App Routing **/ import { AdminRoutingModule} from './admin.routing.module'; @NgModule({ declarations: [ // your components // your admin.component ], imports: [ CommonModule, AdminRoutingModule ] }) export class AdminModule { }
admin.routing.module.ts :
设置一个空path作为基础路线''
。
import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; // Import your components @NgModule({ imports: [ RouterModule.forChild([ { path: '', component: AdminComponent, children: [ { path: '', redirectTo: '/checkout', pathMatch: 'full' }, { path: 'checkout', component: CheckoutBoardComponent }, . . . ] } ]) ], exports: [RouterModule] }) export class AdminRoutingModule{ }
如果你想有更多的子路线,例如,嵌套的router-outlet
只是复制我所显示的app.module.routing
与出口和loadchildren
。
我不太确定你想要实现你在app.routing.module
上显示的app.routing.module
。 您确定要将所有内容redirect到pipe理员吗?
就像是:
@NgModule({ imports: [ RouterModule.forRoot([ { path: 'login', component: LoginPageComponent, canActivate: [PreventLoggedInAccess] }, { path: 'admin', loadChildren: exportAdminModule }, { path: '', redirectTo: '/login', pathMatch: 'full' }, { path: '**', redirectTo: '/login' } ], { useHash : true }) ], exports: [RouterModule] })
如果您已经login,则PreventLoggedInAccess
authguard会阻止您login
@NgModule({ imports: [ RouterModule.forChild([ { path: '', component: AdminComponent, canActivateChild: [AuthGuardService], children: [ . . . ] } ]) ], exports: [RouterModule] })
与AuthGuardService
允许访问子路由只有当你login会更有意义,在我看来。
在这里你可以阅读更多关于身份validation。