Question

我正在创建一个注册页面，每个页面都有其自己的组件。

我在一个教程中看到您可以使用：...SignUpRoutes在app-routing.module中的路径之间

例如，当前我在sign-up-routing.module中；

export const SignUpRoutes: Routes = [
    {
      path: 'sign-up',
      component: SignUpComponent,
      children: [
    { path: 'me',  component: MeComponent },
    { path: 'contact',  component: ContactComponent },
    { path: 'payment',  component: PaymentComponent }
      ]
    }
];

@NgModule({
  imports: [RouterModule.forChild(SignUpRoutes)],
  exports: [RouterModule]
})

export class SignUpRoutingModule {}

然后在应用程序路由模块中

const routes: Routes = [

  {
    path: '', component: HomeComponent  
  },
  {
    path: 'sign-up', component: SignUpComponent 
  },
  ...SignUpRoutes,
  {
    path: 'login', component: LoginComponent
  },
  {
    path: '**', redirectTo: ''
  }
];


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

我尝试遵循Angular Routing指南，但是所有页面都显示为空白。如果我手动导航到/sign-up/contact，则app-routing.module中的路由通配符将重定向到home，但为空白。如果我尝试导航到/sign-up/me，则页面会加载各种页面，但该页面为空白，并且表单在页面上但不可见。

在sign-up.component html模板中，有一个<router-outlet>。

我不确定如何进行操作，就像我碰到了砖墙一样... 非常感谢您的帮助：）

Answer 1

我认为您正在尝试执行“延迟加载”。

这是这样的：

在您的AppRoutingModule中：

const routes: Routes = [

  {
    path: '', component: HomeComponent
  },
  {
    path: 'sign-up', component: SignUpComponent,
    loadChildren: './signup/signup.module#SignupModule
  },
  {
    path: 'login', component: LoginComponent
  },
  {
    path: '**', redirectTo: ''
  }
];

您需要一个新模块（在我的示例中，名称为signup）。在此模块中（或与之关联的生根模块文件中），您将需要那些路由：

const routes: Routes = [
  {
    path: '',
    component: SignUpComponent
  },
  { 
    path: 'me',
    component: MeComponent
  },
  {
    path: 'contact',
    component: ContactComponent
  },
  { 
    path: 'payment',
    component: PaymentComponent
  }   
];

希望有帮助。

Answer 2

我使您的堆叠突飞猛进，足以展示一些东西。但是到目前为止，我对您想做的进一步工作还不了解。这是更新的堆叠闪电战：https://stackblitz.com/edit/sign-up-page-angular-with-children-chj5zx

下一个问题是注册组件路由到注册组件。我认为可能是您原始家庭组件的复制/粘贴问题？

Answer 3

感谢@Deborahk的帮助！将github存储库与子页面进行比较，可以通过将模块作为子模块加载来了解路由的工作原理。

2 为何无法正常工作的主要问题是：

正在导入Authguards并中断页面
App-Routing-Module中的路由正在加载注册页面，然后尝试将子页面放在打破页面的顶部。该修复程序将注册页面作为子级加载到路由sign-up中，以便将这些子级定向到注册路由。

供参考，启用路由的更改是：

signup.module文件：

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

import { SignupComponent } from './signup.component';
import { Step1Component } from './step1/step1.component';
import { Step2Component } from './step2/step2.component';
import { Step3Component } from './step3/step3.component';

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '',
        component: SignupComponent,
        children: [
          {
            path: '',
            redirectTo: 'step1',
            pathMatch: 'full'
          },
          {
            path: 'step1',
            component: Step1Component
          },
          {
            path: 'step2',
            component: Step2Component
          },
          {
            path: 'step3',
            component: Step3Component
          }
        ]
      }
    ])
  ],
  declarations: [
    SignupComponent,
    Step1Component,
    Step2Component,
    Step3Component
  ],
  providers: [
  ]
})
export class SignupModule { }

应用路由文件：

const routes: Routes = [


  { path: '', component: HomeComponent },

  { path: 'sign-up', children: [
      { path: '',  data: { preload: true },
      loadChildren: 'app/user/sign-up/signup.module#SignupModule' },
    ]},
  { path: '**', redirectTo: '' }
];

在注册组件HTML中，

  <router-outlet></router-outlet>

用于正确导航到所需的子页面。

感谢您的输入和指导！

儿童角路由页面？

3 个答案: