首页 文章

儿童角度路由页面？

提问于
浏览 次
1

我正在制作一个注册页面，每个页面都有自己的组件 .

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

例如，目前我在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中的路由通配符会重定向到home但是为空白 . 如果我尝试导航到 /sign-up/me 然后页面排序加载，但是空白，表单在页面上但不可见 .

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

我不确定如何继续，因为我觉得我已经碰到了一堵砖墙......任何帮助都非常感谢:)

angular angular-routing

3 回答

  • 0

    我想你正在尝试做一些叫做Lazy Loading的事情 .

    这是这样的：

    在你的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
  }   
];

    希望能帮助到你 .

    回复于
  • 0

    我得到你的stackblitz足够远，可以显示一些东西 . 但是在这一点上，我还不太了解你想要做些什么来进一步发展 . 这是一个更新的stackblitz：https://stackblitz.com/edit/sign-up-page-angular-with-children-chj5zx

    下一个问题是注册组件路由到注册组件 . 我认为这可能是原始主页组件的复制/粘贴问题？

    回复于
  • 0

    谢谢@Deborahk的帮助！通过将模块作为子项加载，将github repo与子页面进行比较有助于了解路由的工作原理 .

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

    和App路由文件：

    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>

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

    感谢大家的投入和指导！

    回复于

相关问题