无论我做什么，我的activatedRoute queryParams总是空的

Question

我不知道这里可能会出什么问题。我有一个带有查询参数

的URL

?search=something

在我的一个组件中，我试图提取它

const input = this.activatedRoute.queryParams.search;

这是公共演示url: https://angular-ivy-pjfam6.stackblitz.io/?search=something

代码:Stackblitz

似乎工作，在日志中，我实际上在路由跟踪日志中的queryParam，但在我试图提取它的时候，它消失了。有什么建议吗?

更新:似乎如果我不去快照

this.activatedRoute.queryParams.subscribe(qp => {
const input = qp?.search;
this.element.nativeElement.value = input;
});

Stackblitz

Answer 1

有两种访问参数的方法:

1 -route.snapshot.paramMap

2 -route.paramMap.subscribe

如果你不想在你访问的组件中更新你的参数，你可以使用snapshot。

snapshot是同步的，当使用snapshot时，你得到的值一旦组件加载:

ngOnInit() {
this.input = this.route.snapshot.paramMap.get("search")
}

但是如果您想要更新同一组件中的参数，那么您必须使用订阅您应该订阅它以获取值:

ngOnInit() {
this.route.paramMap.subscribe(params: ParamMap => {
this.input= +params.get('search');
console.log(params);     
});
}

当你订阅每次更新的值，你可以得到它。

Answer 2

尝试使用:

constructor(
private route: ActivatedRoute
) { }
ngOnInit() { 
const input = this.route.snapshot.params.search;
}

Answer 3

const input:Observable<string>= this.activatedRoute.params.pipe(map(p=> p.search));

尝试使用这个