在 Angular 中：如何检查发送 Id 的上一个路由，然后应用 if else 条件

Question

所以我想做的是。我在 angular2+ Application

中有三个组件

1 家（/home）路线

2 个产品具有 (/product) 路线

3 ViewProducts with (/view product) 路线。

HomeComponent 有特色产品。

ProductComponent 只有产品。

他们都有一个方法可以将他们路由到带有 feature/product _id 的 viewProduct 组件。

现在 ViewCompnenet 应该通过检查前一个来检查 _id 来自哪个组件路线，然后根据路线做一些动作。

这是我的片段。

   for example
   in FeatureProductComponent / ProductComponet both have this method
   
      SendProductId(_ProductId){
        this._MessengerService.SendFeatureProductId(_ProductId);//I am using rxjs to send data to viewComponent
        this._Router.navigate(['viewProduct']);
      }
 

     Now at ViewProduct Component.ts
     ngOnInit(): void {
       if(_Id is coming from /home (route or slug){

        //run some block of code here

       }else if(_id is coming from /product (route or slug)){

       
                     ///run some block of code here

          }
     }

Answer 1

这是一个包含您想要的内容的 StackBlitz：

https://stackblitz.com/edit/angular-ivy-xceqqt?embed=1&file=src/index.html

在 home.component.html 和 list.component.html 中，我在 a 元素上指定了查询参数，这些参数将附加到 [= 的导航中36=].
```
<a ... [routerLink]='["/product", i]' [queryParams]="{from: 'home'}">
    Go to product {{ i }}
</a>
```

在show.component.ts我正在读取查询参数的值

constructor(private route: ActivatedRoute) {
  this.route.queryParams.subscribe((params) => {
    this.from = <string>params.from;
  });
}

在这里您可以放置您的 if 子句来决定需要采取什么行动。

Answer 2

我已经使用下面给出的逻辑实现并解决了这个问题。它运行良好只是想知道它是否是解决这个特定问题的好方法。

  viewProductComponent.ts
 
 Here docs are coming from the home/product component and it is an object
 {id:someId,Component:someComponent} and on this object i am checking form which
  component the data is coming.

     
 this._MessengerService.GetMessageWithData().subscribe((docs: any) => {
   
   if (docs.Component === "FeatureProductComponent") {
         console.log('Data Coming From Feature Product Component');
       } else if (docs.Component === "ProductComponent") {
         console.log('Data Coming From Feature Product Component');
       }
     });

  }

在 Angular 中：如何检查发送 Id 的上一个路由，然后应用 if else 条件

In Angular: How to Check the Previous route that is sending the Id, then apply the if else condition

angular

if-statement

routes

angular2-routing