角6中的延迟加载面临的问题

时间:2020-01-09 07:02:37

标签: angular angular6 angular7 lazy-loading angular8

结构是

1--login component
  1.1--forget password component
  1.2--reset password component

为此,我创建了名为“登录模块”的模块

这是我的编码:

app.routing

 {
path: '',
redirectTo: 'login',
pathMatch: 'full',

 },
 {
   path: 'login',
   component: LoginComponent,

   children: [
    {
      path: 'login',
      canActivate: [AuthServiceGuard],
      loadChildren: './login/login.module#LoginModule'
    }
   ]
 }

login.routing

const routes: Routes = [
 {
  path:'',
  component : LoginComponent,
  data:{
    title:'login'
  },
   children:[{
      path:'forgotPassword',
      component:forgotPwdComponent,
      data:{
        title:'ForgotPassword'
      }
    },
   {
      path:'resetPassword',
      component:ResetPwdComponent,
      data:{
        title:'ResettPassword'
      }
    }]

在login.html中,我使用routerLink作为

<a class="achortag" routerLink="/forgotPassword">Forgot Password</a>

现在出现错误,例如:


core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'forgotPassword'
Error: Cannot match any routes. URL Segment: 'forgotPassword'

我在loginmodule和

中分别调用了gotpwdComponent和resetpwdcomponent

我在appmodule中调用了loginmodule 我的步骤有什么问题吗?

有人可以引导我吗?

2 个答案:

答案 0 :(得分:1)

当前您忘记的密码是/login/login/forgotPassword

您可以像这样更改路由

app.routing

[
   {
       path: '',
       redirectTo: 'login',
       pathMatch: 'full',
   },
   {
       path: '',
       canActivate: [AuthServiceGuard],
       loadChildren: './login/login.module#LoginModule'
   }
]

在这种情况下,您的路线是/login/forgotPassword

如果您要使用路线/forgotPassword而不是/login/forgotPassword

您可以在下面更改代码

app.routing

[
  {
     path: '',
     canActivate: [AuthServiceGuard],
     loadChildren: './login/login.module#LoginModule'
   }
]

login.routing

const routes: Routes = [
  {
     path:'login',
     component : LoginComponent,
     data:{
     title:'login'
  },
  {
     path:'forgotPassword',
     component:forgotPwdComponent,
     data:{
        title:'ForgotPassword'
     }
   },
   {
      path:'resetPassword',
      component:ResetPwdComponent,
      data:{
         title:'ResettPassword'
      }
   }
]

答案 1 :(得分:0)

尝试这样:

[routerLink]="['login/forgotPassword']
相关问题