Angular 5 中的 ActivatedRoute 未传送 URL 参数。想法？

Question

我在 app.component.ts 页面上实施了 ActivatedRoute。这是我有一个大的红色退出按钮的页面，它按预期出现在我的应用程序的所有页面上。

我跳转到 url 我创建的（带有查询字符串）如下：

http://localhost:4200/status?returnString=xyz

我的构造函数中有一个 private route: ActivatedRoute。在我的 ngOnInit() 函数中，我有 console.log(this.route.queryParams);。 returns 一个对象，其中 ._value 是一个属性为 returnString: "xyz" 的对象。

问题是，当我 console.log(this.route.queryParams.returnString) 或 console.log(this.route.queryParams._value) 时，我得到的是一个没有属性的对象。 {}.

我的问题是，发生了什么，或者我做错了什么？我需要什么才能从 URL 中获取我可以在 Angular 5 中使用的参数？

Answer 1

您遇到的问题是因为 queryParams 是 Observable。

在您的 ngOnInit() 函数中，您需要订阅可观察对象：

ngOnInit() {
    this.route. queryParams.subscribe(
      params => {//Do something with the params.returnString},
      err => console.log(err)
);
}

Official Angular Docs - ActivatedRoute

Answer 2

queryParams 是一个 Observable，所以你应该监听变化而不是检查值。

启动 app.component 时，该值尚未设置，但当您检查它时，它已设置。这可能就是您正在经历的。

设置侦听器并对更改做出反应

route.queryParams.subscribe((params: Params) => this.doSomething(params.returnString))

Angular 5 中的 ActivatedRoute 未传送 URL 参数。想法？

ActivatedRoute in Angular 5 not delivering URL parameters. Ideas?

angular

url

get

angular5

angular-activatedroute