在Angular中，我如何将先前的路由作为路径获取？

21 浏览
0 Comments

在Angular中，我如何将先前的路由作为路径获取？

在Angular中，如何将前一个路由作为路径获取？

我尝试使用这个链接提供的解决方案，但它在第一次页面加载时不执行。

constructor(router: Router) {
  router.events
  .pipe(filter(event => event instanceof NavigationEnd))
  .subscribe((event: NavigationEnd) => {
    console.log('prev:', event.previousUrl);
    this.previousUrl = event.url;
  });
}

我尝试了RoutesRecognized和NavigationEnd，但它们都没有起作用。

我在constructor和ngOnInit中调用了这个方法，但它们都没有在第一次页面加载时执行。

有没有办法获取前一个URL？

谢谢。

0

3 答案

0 Comments

如何在Angular中获取前一个路由作为路径？

在Angular中，有时候我们需要获取前一个路由的路径。下面是一种获取前一个路由路径的方法：

在构造函数中，可以使用以下代码获取前一个路由的路径：

this.router.getCurrentNavigation().previousNavigation.finalUrl.toString()

需要注意的是，如果在构造函数之外使用this.router.getCurrentNavigation()，那么在生命周期之后，它将无法获取到正确的值，始终为null。

以下是一个示例，展示了如何在构造函数中使用上述代码获取前一个路由的路径：

constructor(private router: Router) {
  console.log(this.router.getCurrentNavigation().previousNavigation.finalUrl.toString());
}

0
0 Comments

问题的原因是无法获取第一次导航之前的路由。解决方法是使用navigationStart来解决这个问题，并且可以尝试使用pairwise()方法。

首先，在ngOnInit()方法中，使用_router.events过滤出NavigationStart事件，并使用bufferCount(2,1)方法进行缓冲，然后订阅这个事件并获取url的值，将其赋给orginalPath变量。代码如下：

ngOnInit(){
    this._router.events.filter(e => e instanceof NavigationStart )
      .bufferCount(2,1).subscribe(e => {
        if(e !== null && e !== undefined) this.orginalPath = e[0]['url'].substr(1)
    });
}

另外，你还可以尝试使用pairwise()方法来解决这个问题。代码如下：

router.events
  .pipe(
    filter(e => e instanceof NavigationEnd),
    pairwise() // check it's second route load
  )
  .subscribe((e: any[]) => {
    console.log(e);
  });

感谢Shah的回复，但是尝试了这部分代码后发现并没有起作用。

0
0 Comments

问题出现的原因是想要获取在Angular中的前一个路径。解决方法是使用Router类的getCurrentNavigation()方法来获取前一个导航，然后通过previousNavigation属性来获取前一个路径。需要注意的是，getCurrentNavigation()方法必须在构造函数中调用。

以下是解决方法的代码示例：

import { Component, OnInit } from '@angular/core';
import { Router, Navigation } from '@angular/router';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  previousPath: string | null;
  constructor(private router: Router) { }
  ngOnInit(): void {
    const currentNavigation = this.router.getCurrentNavigation();
    if (currentNavigation) {
      this.previousPath = currentNavigation.previousNavigation?.finalUrl.toString();
    }
  }
}

请注意，上述代码需要在Angular 15版本下运行。

0