个人中心
gpt4 book ai didi

Angular queryParamMap 为空，然后填充

转载 作者：太空狗 更新时间：2023-10-29 19:27:41 26 4
gpt4 key购买 nike

我在我的应用程序中创建了一个新模块，这样我就可以分离不需要通信的部分，并创建了一个 new.module.ts 及其自己的路由模块和组件:

new-routing.module.ts:

const exportRoutes: Routes = [
  {
    path: 'export',
    component: ExportsComponent
  }
]

@NgModule({
  imports: [RouterModule.forRoot(exportRoutes)],
  exports: [RouterModule]
})
export class ExportRoutingModule {}

new.module.ts:

import { Router } from '@angular/router'
import { BrowserModule } from '@angular/platform-browser'

// Routing Module
import { NewRoutingModule } from './new-routing.module'

@NgModule({
  imports: [..., ExportRoutingModule, ...],
  declarations: [ExportsComponent],
  bootstrap: [ExportsComponent]
})

我有一个简单的index.html:

<body class="app">
  <router-outlet></router-outlet> // outlet is here because I read that I needed it to be able to use activated route, I actually just want the query params
</body>

最后，问题出在哪里，我的组件:

export class MyComponent implements OnInit {

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit() {this.activatedRoute.queryParamMap.subscribe(
(params: ParamMap) => console.log(params) 
// Do stuff with params => error)}

当我在控制台中导航到 http://localhost:4200/export?firstParam=1.00,2.00,3.00 时，params 被记录两次，一次为空，一旦这样填充:

ParamsAsMap {params: {…}}
keys:(...) // empty
params:{} // empty

core.js:3565 Angular is running in the development mode. Call enableProdMode() to enable the production mode.

ParamsAsMap {params: {…}}
keys:Array(3)
params:{firstParam: "1.00,2.00,3.00", secondParam: "bla"}

这会导致我的组件抛出错误，因为我需要这些参数来显示我的组件，并且第一次登录时它们是空的，所以:

  • 为什么他们登录了两次？
  • 为什么我的代码在我的 params observable 有值之前执行？
  • 我能去掉路由器 socket 吗(我真的不需要，因为我没有路由涉及这个模块，我只是使用它，因为我读到我不能使用 activatedRoute没有它；我只想要我的网址中的查询参数

谢谢你的帮助

最佳答案

我将为这个问题提供 2 个解决方案，首先，使用 skip 运算符:

因为 Activated Route 是一个 BehaviorSubject，所以首先我们会得到一个空值，然后是实际的查询参数，这样我们就可以跳过第一个值:

(请注意，此解决方案使用可出租运算符，因此使用 pipe()，如果您不使用可出租运算符，您可以像使用任何其他 rxjs 运算符一样链接它:.skip(1)

export class MyComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() 
    {this.activatedRoute.queryParamMap.pipe(skip(1)).subscribe(
    (params: ParamMap) => console.log(params)}

第二种解决方案，使用常规的 javascript 函数来检索参数:

ngOnInit() {
  const token = this.getParameterByName('access_token');
  console.log(token);
}

getParameterByName(name: any) {
  let url = window.location.href;
  name = name.replace(/[[]]/g, "\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
  results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/+/g, " "));
}

我会指出这个 stackoverflow answer对于原始代码

关于Angular queryParamMap 为空，然后填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47430727/

26 4 0
文章推荐： python - 在 SQLAlchemy 中合并多个声明性基础
文章推荐： python - 在 Django REST 框架 API 根中包含 list_route 方法
文章推荐： python - Django:使用 LayerMapping 更新现有模型？
文章推荐： angular - 每次出现 View 时触发哪种方法 - Nativescript Angular
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com