在 Angular 中首次渲染时，路由查询参数为空答案

【问题标题】：Route query parameters is empty on first render in Angular在 Angular 中首次渲染时，路由查询参数为空
【发布时间】：2022-01-23 20:31:54
【问题描述】：

我有一个场景，我根据 angular url 的查询参数决定操作。

例如，如果 url 是 localhost:4200/token=abc 我需要做一些任务，如果 url 是 localhost:4200 那么我需要做其他事情。我在app component 的ngOnInit() 中添加了这个逻辑。问题是，第一次渲染组件时查询参数是空的，需要一段时间才能输入params值。

代码：

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

    this.route.queryParams.subscribe((params: any)=>{
    console.log("params 1:",params);
    if(Object.keys(params).length){ //If there are query parameters 
          console.log("If exectued",params);
         //do Something 
    }
    else{
        console.log("Else exectued",params);
        //do Something else
     }
    })
  }

问题是参数最初是空的，它进入else 条件。之后它再次转到if。输出类似于

params 1: {}
Else executed > {} 
If executed > {token:abc}

如何检查路由是否已经用参数正确初始化然后继续？

PS：我找到了similar thing in Next.js，但是如何在 Angular 中做到这一点？

【问题讨论】：

标签： angular angular-router query-parameters angular-activatedroute angular-router-params

【解决方案1】：

为什么不尝试 ActivatedRoute 仅使用“params”（而不是 queryParams）？ ...我真的不知道它是否有不同的行为：


ngOnInit(): void {
    this.activatedRoute.params.subscribe((params: any)=>{
    console.log("params 1:",params);
    if(Object.keys(params).length){ //If there are query parameters 
          console.log("If exectued",params);
         //do Something 
    }
    else{
        console.log("Else exectued",params);
        //do Something else
     }
    })
  }

【讨论】：