如何使用 Router 或 ActivatedRoute 从 url 获取参数答案

【问题标题】：How to get params from url using Router or ActivatedRoute in angular如何使用 Router 或 ActivatedRoute 从 url 获取参数
【发布时间】：2019-04-12 09:42:47
【问题描述】：

我正在尝试在我的 Angular 应用程序中从 AppComponent 中的 url 获取参数。

但是当我使用 ActivatedRoute 来获取参数时，它给出了 null。这是我的路由器配置。

  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'product/:product',
    component: HomeComponent,
    canActivate: [AuthGuard]
  }

这是我在 AppComponent 中尝试从 url 获取 params 的结果。

constructor(
      private route: ActivatedRoute,
      private router: Router
) {}

ngOnInit() {

this.route.params.subscribe(params => {
      console.log(params['product']); //jsut print the result in console
});

//or can use to get the result
//console.log(this.route.snapshot.params['product'];

}

此代码仅适用于特定组件。那么，有没有合适的方法来获得结果。 [角度 6+]

【问题讨论】：

您在哪里订阅 route.params ？它在任何功能内部吗？请提供完整代码
@SachinGupta 是的，我编辑了代码
它应该可以工作，你能不能创建一个堆栈闪电战来重现这个问题。
@SachinGupta 这是有关问题的 stackblitz 链接：angular-9xa95q.stackblitz.io/product/se

标签： angular angular-router

【解决方案1】：

首先，创建一个sharedService

import { Injectable } from '@angular/core';
import {  Subject  } from 'rxjs';


@Injectable()
export class SharedService {

  myData: Subject<any> = new Subject<any>();

  constructor() {}

  setData(data) {
    this.myData.next(data);
  }
}

然后从你要设置数据的地方使用这个方法：

export class MyComponent implements OnInit {

    constructor(private sharedService: SharedService) { }

    ngOnInit() {
       this.sharedService.setData(data);
    }
}

然后在你的 appComponent 中：

export class AppComponent implements OnInit {

  constructor(private sharedService: SharedService) {
    this.sharedService.myData.subscribe((value) => {
     console.log(value) // Here you will get your complete data
    });
  }

}

【讨论】：

【解决方案2】：

现在明白了。问题是因为AppComponent 始终存在并且它的参数没有更新。如果您订阅HomeComponent 中的activatedRoute，您可以获得更新后的值。如果要求获取AppComponent 中的值，您可以按照@Chirag 的答案订阅AppCOMponent 并从HomeComponent 更新值。查看分叉代码here

【讨论】：