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

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 中导航栏上的 login/signup 按钮加载 AuthenticationModule 中的 login/signup 页面，其中包含数据属性以告诉我需要重定向到 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');
        }
      }
    });: 

  }

}

这里我订阅了可观察数据并检查页面是 'login' 还是 'signup' 并相应地导航。但是这样做会导致无限循环。

console.log('login') 或 console.log('signup') 无限期保留运行。谁能告诉我我在这里犯了什么错误，以及我正在使用的方法是否有解决方法。

非常感谢。

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');
             }

          }

       }
     });

  }

}

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

Loading modules along with data using lazy loading resulting in infinite loop

lazy-loading

angular-routing

angular