Question

Goodday

我有以下（简单）问题。我有2个组件导航到一个组件中的1个组件，我想知道导航来自哪个组件，因此我可以采取相应的行动（在这种情况下，是否刷新列表）。问题是两个组件的网址都相同。

// Component: ToolbarComponent
// URL: /products/123
navigateBack() {
  this.router.navigate(['/products']);    
}

-

// Component: ProductDetailComponent
// URL: /products/123
navigateBack() {
  this.router.navigate(['/products']);    
}

-

// Component: ProductsComponent
// URL: /products
public constructor() {
  this.navigationSubscription = this.router.events.subscribe((e: any) => {
        if (e instanceof NavigationEnd && 
            e.urlAfterRedirects.endsWith('products')) {
            // Here i want to know the origin, ToolbarComponent or ProductDetailComponent
        }
}

我认为上面的简化代码很好地说明了我想要完成的事情。

谢谢！

编辑：我不希望原点在URL中可见。

Answer 1

正如@Suresh提供的那样，您可以使用queryParams。该解决方案的问题在于它将使用不必要的参数污染URL。

您可以做的是使用共享服务，您将在其中存储呼叫者：

export class SharingService {
  ...
  navigateBack(caller: any) {
    this.caller = caller;
    this.router.navigate(['/products']);    
  }
}

在您的组件中：

navigateBack() {
  this.sharingService.navigateBack(this);    
}

现在，您可以在上一个组件中测试调用方是否为任一组件的实例：

ngOnInit() {
  if (this.sharingService.caller instanceof ComponentOne) { ... }
  else if (this.sharingService.caller instanceof ComponentTwo) { ... }
}

Answer 2

您可以使用查询参数进行处理，否则服务类将跟踪用户来自何处。

this._router.navigate（['/ products']，{queryParams：{from：'viewname'}}）;

角度：导航后获取原点

2 个答案: