Question

我如何从Angular5中的URL获取查询参数？

指向我网页的链接，如：的 http://localhost:4200/index.html?action=show-news&type=1

我想让他们参与我的服务......

在Angualr1.x中，我可以从$ location获取查询参数，就像：

var searchObject = $location.search();

在Angular5中，我可以从PlatformLocation获取它们，就像：

this.platformLocation.search

但在文件中： PlatformLocation - ＆＃39; 应用程序开发人员不应直接使用此类。相反，请使用位置。＆＃39;

在“课程位置”中，我找不到任何获取查询参数的解决方案。

有人说从Class ActivatedRoute获取它们，就像：

this.activatedRoute.queryParams.subscribe(params => {
  console.log('this.route.snapshot.queryParamMap: ', this.route.snapshot.queryParamMap);
});

但它无法得到它们......

我该怎么办？直接使用Class PlatformLocation？

Answer 1

您必须注入ActivatedRoute：

private _queryParams;

constructor(
  private readonly _router: Router,
  private readonly _activatedRoute: ActivatedRoute
)

ngOnInit() {
    this.assignQueryParams();
    this._router.events
     .takeUntil(this._destroy$)
     .filter(event => event instanceof NavigationEnd)
     .subscribe(() => this.assignQueryParams());
}

private assignQueryParams() {
  this._queryParams = this._activatedRoute.snapshot.queryParams;
}

然后通过在初始化和路由器更改时获取_activatedRoute的状态，您始终可以引用组件中的当前queryParams！

Angular 5，使用PlatformLocation从URL获取查询参数（不带路由器）？

1 个答案: