Demo

Question

对我的功能使用Angular 4的路由和单独的文件/模块，我试图让我的应用程序始终首先显示登录屏幕，然后在用户登录后切换到我的主视图（所有路径）受到身份验证的保护，除了登录之外）。

我在Plunker中创建了一个测试应用程序，在应用程序中有关于我需要的功能的注释，而不是目前正在发生的事情： https://plnkr.co/edit/MGIGH4xpKZOtgCBl5lam

我在大多数示例代码(like this one)中遇到的问题是，登录后路由到的组件没有任何嵌套视图。我通过将所有路由放在一个文件中来使我的应用程序工作，但我更喜欢拆分每个功能的路由。然而，一旦我这样做，事情开始变得不稳定：

点击登录按钮会显示俱乐部组件，而不会嵌套在主导航模板中;加上俱乐部组件甚至在认证完成之前就会显示出来。
如果我通过输入“＆＃39;成员”手动导航在网址中，成员列表正确显示，但是当我点击某个成员时，它会显示＆＃34;页面未找到＆＃34;而不是成员详细信息视图

然而，它很接近 - 键入＆＃34; club＆＃34;或＆＃34;成员＆＃34;在URL中将强制显示登录页面，当我单击登录按钮时，它将显示正确的页面，嵌套在主导航视图中。然后我可以使用主导航链接在＆＃34; club＆＃34;之间来回翻转。和＆＃34;成员＆＃34;并注销。

我认为这个问题可能与我做延迟加载的方式有关吗？

const routes: Routes = [
  { path: '', component: MainNavComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'club', loadChildren: 'app/club.module#ClubModule'},
      { path: 'members', loadChildren: 'app/members.module#MembersModule'},
      { path: '', redirectTo: 'club', pathMatch: 'full' }
    ]
  }
];

我按照angular.io路由文档和these suggestions来使其工作正常，但我无法弄清楚最后一点是搞砸了。我真的很感激任何帮助！

Answer 1

我解决了各种问题，并将其添加到下面的演示中。

不要将延迟加载的模块导入应用程序模块，因为这会导致它们立即加载。这也使模块路由优先于AppModule路由。

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    AuthModule,
    // ClubModule,
    // MainNavModule,
    // MembersModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

延迟加载的模块应该都具有自己的应用程序，因此应该配置路由，以便每个模块的根组件都有一个空路径。

// club-routing.module.ts
const routes: Routes = [
  { path: '',  component: ClubComponent }
];

// members-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: MembersComponent,
    canActivate: [AuthGuard],
    children: [
      { path: ':id', component: MemberDetailComponent }
    ]
  }
];

最后，应用模块应该有路由器要解析的默认路径。在我的示例中，我将其解析为路由模块，因为它受到保护的保护，但您可以轻松地将其路由到登录模块。

// app-routing.module.ts
const routes: Routes = [
  { path: '', loadChildren: 'app/main-nav.module#MainNavModule' },
  { path: 'login', component: LoginComponent },
  { path: '**', component: PageNotFoundComponent }
];

使用多个模块/文件的Login页面和主视图（带嵌套视图）的Angular.io路由

1 个答案:

Demo