angularFound的angular2路由

时间:2016-11-15 12:41:39

标签: angular routing

我尝试使用儿童溃败。我的主路由模块(在根目录中):

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { NotFoundComponent } from './notfound/notfound.component';
import { LoggedInGuard } from './login-guard/login-guard.component';

const routes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: HomeComponent, pathMatch: 'full'},
    {path: 'profile', component: ProfileComponent, canActivate: [LoggedInGuard], canLoad: [LoggedInGuard]},
    {path: '**', component: NotFoundComponent},
];
@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

和子路由模块(在子目录中):

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

import { PPComponent } from './pp.component';
import { MembersComponent } from './members/members.component';
import { HistoryComponent } from './history/history.component';


@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'partner-program',
        component: PPComponent,
        children: [
          {
            path: '',
            redirectTo: 'members',
            pathMatch: 'full'
          },
          {
            path: 'members',
            component: MembersComponent,
          },
          {
            path: 'history',
            component: HistoryComponent,
          },
        ]
      },


    ])
  ],
  exports: [
    RouterModule
  ]
})
export class PPRoutingModule { }

我对此路线{path: '**', component: NotFoundComponent}有疑问。 Angular2在任何儿童路线之前看到这条路线。结果url'http://localhost:3000/partner-program'显示notFound组件。如果我删除notFound路由,'http://localhost:3000/partner-program'工作正常。 我如何声明notFound路线并说Angular2在最后一轮检查它(在子路线之后)?

GünterZöchbauer,你的意思是这样吗?

RouterModule.forChild([
      {
        path: '',
        children: [
          {
            path: 'partner-program',
            component: PPComponent,
            children: [
              {
                path: '',
                redirectTo: 'members',
                pathMatch: 'full'
              },
              {
                path: 'members',
                component: MembersComponent,
              },
              {
                path: 'history',
                component: HistoryComponent,
              },
            ]
          }
        ]
      }
    ])

1 个答案:

答案 0 :(得分:6)

将这些模块导入主模块时,请确保最后添加AppRoutingModule。这完全是关于路线登记的顺序