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 { }

管理员-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您可以阅读有关身份验证的更多信息。

angular2嵌套路由不起作用，没有报告错误，但是空白页面

1 个答案: