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

Posted 2023-02-19

【中文标题】在 Angular 中首次渲染时，路由查询参数为空

【英文标题】：Route query parameters is empty on first render in 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 中做到这一点？

【参考方案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
     
    )