无法获取模块组件中的queryParams（Angular）

Question

Angular 的新手 (17) 这是我的应用程序结构

--app.routing.modules.ts

--app.component.ts

------模块1.路由.模块

-------------module2.routing.module

-------------module2.component.ts

----------------------------componentY.component.ts

app.routing.modules.ts ---> 加载其他模块：

{
    path: 'module1',
    loadChildren: () => import('./modules/module1/module1.module').then(m => m.Module1)
}

以及 module1 的路由：

module1.routing.module.ts ---> 加载另一个模块

{
    path: 'module2',
    loadChildren: () => import('./modules/module2/module2.module').then(m => m.Module2)
}

现在在 module1 中，我有一个组件（componentX，它打开一个新选项卡并通过 queryParam 传递 ID：

模块1/组件/componentX.component.ts

navigate(p_id : number){
    
    id = "call from API"
    const url = this.router.serializeUrl(this.router.createUrlTree(
      ['/module2/module2-view'], { queryParams: {id: id}}
    ));
    window.open(url, '_blank');
  }

我已经为此模块创建了一个组件，我的问题是当加载moduel2的组件时，它没有获取queryParams：

module2.component.ts

ngOnInit(): void {
    var id= this.route.snapshot.queryParamMap.get('d_id') "--> this is null"
  }

直到我从 component2.routing.module.ts 加载另一个组件（componentY）时，queryParam 才被注册。

我尝试创建一个服务，并从 componentX.component.ts 以及模块内（componentY.component.ts）更新它们，发送可观察值并在 Angular 提供的所有生命周期函数中调用它们，但没有骰子。路由器似乎在确认 url 或其他任何内容之前加载了模块组件？

someService.ts

export class SomeService{

  private messageSource = new BehaviorSubject<any>(null);
  id= this.messageSource.asObservable();

    constructor(){}

    updateId(id: any){
        this.messageSource.next(id)
      }
}

module2.component.ts

export class model2Component OnInit{

  id: number;

  constructor(private someService: SomeService){
  }
  

  ngOnInit(): void {
    this.someService.id.subscribe(id => this.id = id)
  }

这可能是我项目结构混乱的错，但我现在有点迷失了。我可以使用任何解决方案和/或资源来解决此问题吗？

提前致谢。

Answer 1

这是因为组件 Y 是查询参数所在的位置。您可以使用

firstChild

（即组件 Y）轻松解决此问题。

module2.component.ts

  ngOnInit(): void {
    var id= this.route?.snapshot?.firstChild?.queryParamMap?.get('id');
  }