儿童页面的角度路由？

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 {}

然后在app-routing-module中：

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 中的路由通配符会重定向到主页但为空白。如果我尝试导航到/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: ''
  }
];

您需要一个新模块（在我的示例中，名称是注册）。 在此模块中（或关联的根模块文件中），您将需要这些路由：

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个主要问题是：

• 正在导入 Authguard 并破坏页面
• 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 { }

还有 App-routing 文件：

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>

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

感谢大家的意见和指导！