Question

我想在用户登录后调用某个功能。该用户可以从任何页面登录，成功登录后，该用户将被重定向回到他们正在浏览的上一页。

我正在使用Router.navigate来重定向页面。

寻找一段时间后，NavigationEnd似乎是一个可行的选择，但它适用于所有路由器事件，而不仅仅是特定事件。

我的login.component.ts具有以下内容：

...
this.authenticationService.login(this.credentials)
  .pipe(first())
  .subscribe(
    data => {
      this.router.navigate([this.returnUrl]);
      // Need to call function `doSomething()` here.
    },
    error => {
      // Implement error handling
    });
...

我知道这不是一个承诺，但我正在寻找类似的东西：

this.router.navigate([this.returnUrl])
  .then(this.doSomething()); // or .pipe()

Answer 1

您可以使用.navigateByUrl()导航并返回一个诺言。

this.router.navigateByUrl(this.returnUrl).then(this.doSomething());

Answer 2

您可能想研究使用某种lifecycle events。.您可以在要导航的组件中执行OnDestroy。或您正在导航的组件中的OnInit。

Answer 3

我认为最简单的方法就是像您提到的那样监听NavigationEnd事件，但是在事件发生后停止监听。

this.authenticationService.login(this.credentials)
  .pipe(first())
  .subscribe(
    data => {
      this.router.navigate([this.returnUrl]);
      this.router.events.pipe(
        first(evt => evt instanceof NavigationEnd)
      ).subscribe(() => {
        this.doSomething(); 
      });
    },
    error => {
      // Implement error handling
    });

我认为这是正确且安全的做法，因为您知道：

将会有NavigationEnd个事件
这将是触发代码的正确事件
发生这种情况后，您可以停止收听

Answer 4

怎么样？

this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
        if(event.url === "your-route") {
            //do your thing
        }
    }
});

在Router.navigate末尾调用函数

4 个答案: