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

Question

请帮我检查代码...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 { }

admin-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

Answer 1

您似乎没有在 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：

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

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 的信息。