Question

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

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

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

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

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

Answer 1

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

Answer 2

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

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

在路线定义中：

...
{ 
  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对主组件一无所知，它只知道当它成功登录时，它会导航到某个URL。

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

2 个答案: