首页 文章

如何在路由器配置中监听事件？

提问于
浏览 次
0

我有一个带有登录组件和主组件的应用程序，一旦用户登录，我就想导航到主组件 . 我希望登录组件在进行身份验证后发出“登录成功”事件，然后应用程序组件监听并相应地导航，但我看不到如何在生根配置中添加事件监听器 .

我看到的大多数示例涉及在登录组件中进行导航，但这感觉就像打破了自包含组件的想法，因为登录组件需要知道主组件以及应用程序的生根结构 .

我想使用登录组件的输出，但是当使用路由器配置导航到登录时，我看不到如何执行此操作 .

<login (loginSuccess)="handleLoginSuccess($event)"></login>

还有一个关于github（https://github.com/angular/router/issues/185）的冗长讨论，建议不要导航到兄弟根 .

angular angular2-routing

2 回答

  • 0

    假设您的登录组件输出是授权数据，您可以使用angular guard来处理该行为 .

    回复于
  • 0

    您可能需要使用shared service在主页和登录组件之间进行通信，请参阅this answer .

    如果目标只是重新使用登录组件，则可以在成功后传递要重定向到的网址 . '/ home'通过路线数据 .

    在您的路线定义中：

    ...
{ 
  path: 'login',
  component: LoginComponent,
  data: {
    onLoginOk: '/home'
  }
}

    并在LoginComponent ..

    export class LoginComponent implements OnInit {    

onLoginOk: string;

constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.forEach((data: { onLoginOk: string }) => {
      this.onLoginOk= data.onLoginOk;
    });
  }
...

    所以LoginComponent对home组件一无所知，只知道当它成功登录时，它会导航到某个URL .

    回复于

相关问题