Question

我在传递数据时延迟加载模块时遇到问题。它导致无限循环。这是一个详细的解释：

模块

IndexModule（包含带有基本信息和导航栏的主页）
AuthenticationModule（包含登录和注册页面）

在IndexModule index-routing.module.ts ：

const routes: Routes = [
  {
    path: '',
    component: IndexPageComponent
  },
  {
    path: 'login',
    loadChildren: () => AuthenticationModule,
    data: {
     page: 'login'
    }
  },
  {
    path: 'signup',
    loadChildren: () => AuthenticationModule,
    data: {
      page: 'signup'
    }
  }
];

我正在使用IndexModule中存在的导航栏上的登录/注册按钮来加载带有数据属性的AuthenticationModule中的登录/注册页面，以告诉我需要在AuthenticationModule中重定向到哪个页面。

我的AuthenticationModule authentication.module.ts 文件如下所示：

export class AuthenticationModule {

  pageToRedirect: String;

  constructor(private activatedRoute: ActivatedRoute, private router: Router) {

    this.router.events.subscribe(data => {
      if (data instanceof RoutesRecognized) {
        this.pageToRedirect = data.state.root.firstChild.data.page;
        if (this.pageToRedirect === 'login') {
          this.router.navigate(['login']);
          console.log('Login');
        } else if (this.pageToRedirect === 'signup') {
          this.router.navigate(['signup']);
          console.log('Signup');
        }
      }
    });: 

  }

}

在这里，我订阅了可观察的数据并检查该页面是否是“登录”。或者＆＃39;注册＆＃39;并相应地导航。但这样做会导致无限循环。

console.log（＆＃39; login＆＃39;）或console.log（＆＃39;注册＆＃39;）会无限期地继续运行。任何人都可以告诉我我在这里犯了什么错误，以及我正在使用的方法是否有解决方法。

非常赞赏。

Answer 1

使用锁定尝试：

export class AuthenticationModule {

  pageToRedirect: String;

  constructor(private activatedRoute: ActivatedRoute, private router: Router) {

     this.router.events.subscribe(data => {
       if (data instanceof RoutesRecognized) {

          // enter only if this.pageToRedirect is undefined
          if(!this.pageToRedirect){
              this.pageToRedirect = data.state.root.firstChild.data.page;

              if (this.pageToRedirect === 'login') {
                 this.router.navigate(['login']);
                 console.log('Login');
              } else if (this.pageToRedirect === 'signup') {
                 this.router.navigate(['signup']);
                 console.log('Signup');
             }

          }

       }
     });

  }

}

使用延迟加载加载模块和数据导致无限循环

1 个答案: