Question

我遇到了使用Angular 2项目进行路由的问题。它现在是一个非常小的应用程序，它包含一个PageNotFoundComponent，一个HomeComponent，用于索引页面和一个管理部分。

在admin部分包含主页面的主要AdminComponent，AdminDashboardComponent，用于仪表板部分，ManageCrisisComponent和ManageHeroComponent。

这基本上是在路线部分的Angulars网站上的英雄应用程序。

目前存在的问题是管理部分中的组件无法加载。所以我只是试图将其分解为能够在没有任何进展的情况下路由到页面。

该应用程序包含xxx-routing.module.ts文件来控制或定义路由，以及它们自己的xxx.module.ts文件。基本上，app-routing.module.ts文件和app.module.ts文件以及admin-routing.module.ts文件

以下是所有代码的细分。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const APP_ROUTES: Routes = [
{ path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', data: { preload: true }},
{ path: '', component: HomeComponent },
{ path: '**', component: PageNotFoundComponent }
];

@NgModule({
imports: [
    RouterModule.forRoot(APP_ROUTES)
],
exports: [
    RouterModule
]
})

export class AppRoutingModule {}

app.module.ts文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { HomeComponent } from './home/home.component';



@NgModule({
  declarations: [
AppComponent,
PageNotFoundComponent,
HomeComponent
  ],
  imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
    })
export class AppModule { }

这是app.component.html文件

<h2>App component</h2>
<hr>
<nav>
    <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
    <a routerLink="admin" routerLinkActive="active">Admin</a>
</nav>
<router-outlet></router-outlet>

以下是管理员文件

admin-routing.module.ts文件

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
 import { ManageCrisisComponent } from './manage-crisis.component';
import { ManageHeroComponent } from './manage-hero.component';

const ADMIN_ROUTES: Routes = [
{ path: '', component: AdminComponent,
  children: [

      { path: './dashboard', component: AdminDashboardComponent },
      { path: './manage-crisis', component: ManageCrisisComponent },
      { path: './manage-heroes', component: ManageHeroComponent }
  ],
  data: { preload: true}
 },

];

@NgModule({
imports: [
    RouterModule.forChild(ADMIN_ROUTES)
],

exports: [ RouterModule ]
})

export class AdminRoutingModule {}

admin.module.ts文件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { AdminRoutingModule } from './admin-routing.module';

import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisisComponent } from './manage-crisis.component';
import { ManageHeroComponent } from './manage-hero.component';



@NgModule({
imports: [
    CommonModule,
    FormsModule,
    AdminRoutingModule
],
declarations: [
    AdminComponent,
    AdminDashboardComponent,
    ManageCrisisComponent,
    ManageHeroComponent
],
})

export class AdminModule {}

admin.component.html文件

<h2>Admin Home</h2>
<nav>
<a routerLink="./dashboard" routerLinkActive="active">Dashboard</a>
<a routerLink="./manage-crisis" routerLinkActive="active">Manage Crisis</a>
<a routerLink="./manage-heroes" routerLinkActive="active">Manage Heroes</a>
 </nav>

<router-outlet></router-outlet>

并且只是为了重申问题，就是当我启动应用程序时，主页和管理页面的链接显示，并且它们可以正常工作。在admin.component.html文件中显示指向仪表板和托管区域的链接，它们会显示，但是当我单击它们时，我会获得PageNotFound组件的html文件。所以基本上它没有找到页面并加载它。

提前致谢。

Answer 1

很抱歉，好像我发现了问题所在。我在路径中放置./，导致页面问题无法正确加载。

const ADMIN_ROUTES: Routes = [
{ path: '', component: AdminComponent,
  children: [

      { path: 'dashboard', component: AdminDashboardComponent },
      { path: 'manage-crisis', component: ManageCrisisComponent },
      { path: 'manage-heroes', component: ManageHeroComponent }
  ],

 },

];

Angular 2路由问题

1 个答案: