angular2嵌套路由不工作，没有错误报告，但空白页

问题描述：

请帮我检查代码...没有编译错误，否则输出在cli后npm start。但浏览器似乎是一个空白页面。我已经检查了一遍又一遍，但仍然找不到有什么问题。angular2嵌套路由不工作，没有错误报告，但空白页

PS：IM在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 { }

管理，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

你看到开始本身的空白页面？ – Sajeetharan

@native start后@Sajeetharan在浏览器中为空 – Polydick

什么是浏览器控制台中的错误？ – alexKhymenko

答

好像你没有定义admin路线和你的app.routing里面的孩子。模块。

你应该得到它与

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：

设置一个空的路径作为基本路线''。

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上显示的内容。您确定要将所有内容重定向到管理员吗？

喜欢的东西：

@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] 
})

其中PreventLoggedInAccess authguard阻止你去登录，如果您已经登录并

@NgModule({ 
    imports: [ 
    RouterModule.forChild([ 
     { 
     path: '', 
     component: AdminComponent, 
     canActivateChild: [AuthGuardService], 
     children: [ 
      . . . 
     ] 
     } 
    ]) 
    ], exports: [RouterModule] 
})

与AuthGuardService允许访问到子路由仅在您登录在我看来会更有意义。

Here你可以阅读更多关于authguards。

angular2嵌套路由不工作，没有错误报告，但空白页

相关推荐