Question

我有一个应用程序，分为经过身份验证的部分（InternalRootComponent）和匿名部分（ExternalRootComponent）。

当我明确导航到路径时，一切正常，但是当我转到根（/）时，我没有被重定向。此外，由于某种原因加载了AccountsComponent。

APP-routing.module.ts：

export const routes: Routes = [
    {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
    },
    {
        path: 'login',
        component: ExternalRootComponent,
        children: [
            {
                path: '',
                loadChildren: './login/login.module#LoginModule'
            }
        ]
    },
    {
        path: 'membership',
        component: ExternalRootComponent,
        children: [
            {
                path: '',
                loadChildren: './membership/membership.module#MembershipModule'
            }
        ]
    },
    {
        path: 'app',
        component: InternalRootComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: '',
                canActivateChild: [AuthGuard],
                children: [
                    {
                        path: '',
                        redirectTo: './dashboard',
                        pathMatch: 'full'
                    },
                    {
                        path: 'dashboard',
                        loadChildren: './dashboard/dashboard.module#DashboardModule'
                    },
                    {
                        path: 'accounts',
                        loadChildren: './accounts/accounts.module#AccountsModule'
                    },
                    {
                        path: 'users',
                        loadChildren: './users/users.module#UsersModule'
                    },
                    {
                        path: 'services',
                        loadChildren: './services/services.module#ServicesModule'
                    },
                    {
                        path: 'support',
                        loadChildren: './support/support.module#SupportModule'
                    }
                ]
            }
        ]
    },
    {
        path: '**',
        component: NotFoundComponent
    }
];

帐户-routing.module.ts：

const routes: Routes = [
    {
        path: '',
        component: AccountInfoComponent
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AccountsRoutingModule {}

我不明白为什么第一次重定向不起作用 - 我希望/重定向到/ login。相反，似乎正在调用accounts-routing.module.ts中的空路由。

Answer 1

我的猜测是将AccountModule导入根模块。

这是一个应该有效的通用设置。对不起，我没有使用你的所有代码，因为我认为用最小但完整的例子会更清楚。我对可能导致您正在观察的行为的潜在问题发表评论。我不能完全确定这会在没有更多信息的情况下解决您的确切问题，但它至少是相似的，应该对某人有帮助。

采用以下使用模块延迟加载的设置：

注意 - 延迟加载可能会导致意外行为，因为路由器模块导入子路由，特别是如果您将功能捆绑到功能模块中，这需要根级别导入（尽管最好将服务分离到自己的模块中）。下面的评论应该解释我的意思。

本课程仅导入一次路由的懒惰模块。（不这样做意味着模块不再是懒惰并且完全失去了延迟加载的目的）如果你有捆绑的服务需要在根中将那些分成根目录的不同服务模块

app.module.ts

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

import { AppComponent } from './app.component.ts';
import { routes } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    // I think this might be your issue.
    // DON'T do this (import child module here)
    //
    // MaleChildModule
    // or somethings like this
    // FemaleChildModule.forRoot()
    //
    // NOTE - order doesn't matter either. i.e. putting this on the
    // line above RouterModule.forRoot(routes) will not help
    // 
    // Doing so means the ChildModules and routes are actually being
    // imported twice
    //
    // so these would all be valid paths
    // /female/sally
    // /sally
    // /male/john
    // /john
    //
    // then if you had a module's routes set up like those in 
    // the MaleChildModule the root redirect to /child
    // would not work and it would just be a blank view with no path
    // update in the browser. very confusing situation.
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'ex-app',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {}

APP-routing.module.ts

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'males'
  },
  {
    path: 'males',
    loadChildren: './male-child.module#MaleChildModule'
  },
  {
    path: 'females',
    loadChildren: './female-child.module#FemaleChildModule'
  }
]

注意 - 延迟加载的模块导入RouterModule.forChild（路由），如果不小心可能会导致意外行为

阳child.module.ts

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

import { JohnChildComponent } from './john-child.component.ts';

// NOTE - if you set up your child module like this and make the
// mistake I'm describing (importing child modules multiple times)
// you will get unexpected behavior of redirects not working and
// no clues as to why. I suggest always having empty paths redirect
// to something with a component. FemaleChildModule is an example.
const childRoutes: Routes = [
  {
    path: 'john',
    component: JohnChildComponent
  }
]

@NgModule({
  imports: [
    RouterModule.forChild(childRoutes)
  ],
  declarations: [
    JohnChildComponent
  ]
})
export class MaleChildModule {}

阴child.module.ts

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

import { SallyChildComponent } from './sally-child.component.ts';

const childRoutes: Routes = [
  {
    path: '',
    children: [
      // NOTE - I like to setup lazy loaded modules like this because
      // it prevents masking of the module loading issue because there
      // are never any paths that don't have an associated component
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'sally',
      },
      {
        path: 'sally',
        component: SallyChildComponent
      }
   ]
  }
]

@NgModule({
  imports: [
    RouterModule.forChild(childRoutes)
  ],
  declarations: [
    SallyChildComponent
  ]
})
export class FemailChildModule {}

约翰-child.component.ts

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'ex-john',
  template: '<p>john</p>'
})
export class JohnChildComponent {}

萨利-child.component.ts

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'ex-sally',
  template: '<p>sally</p>'
})
export class SallyChildComponent {}

Answer 2

如果您使用的是惰性加载路由，则全局路由也必须包含在app.module.ts中，以便redirectTo和其他路由功能可以在应用模块中的任何地方使用。

我设计了一个项目，其中coreModule是从appModule中外包的，在其中引入了主要路线

在我的appModule中，coreModule和'AppRoutingModule'（我的主要路线）一起导入了

默认路由重定向不适用于Angular 2中的延迟加载路由

2 个答案: