与其他用户一起传递带有查询参数的角度应用URL

问题描述 投票:0回答:3

我有要求与其他用户转移页面的过滤器状态的要求。例如,当我在特定页面上并应用相同的过滤器时。我想以某些状态共享URL,即与其他用户应用过滤器。

angular routing query-parameters
3个回答
0
投票

检查https://angular.io/guide/router#route-parameters

在路由中设置

{ path: 'hero/:id', component: HeroDetailComponent }

在组件中使用

ngOnInit() {
  this.hero$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
      this.service.getHero(params.get('id')))
  );
}

或没有可观察的替代方案

ngOnInit() {
  let id = this.route.snapshot.paramMap.get('id');

  this.hero$ = this.service.getHero(id);
}

0
投票

您可以这样做 curenturl = window.location.href paramobj = JSON.parse('{"' + currenturl.split('?')[1].replace(/&/g, '","').replace(/=/g, '":"') + '"}', function (k, v) { return k === '' ? v : decodeURIComponent(v) }) 您将在url中获得属性对象


0
投票

最后我找到了解决方法:

我们可以在queryParams中添加自定义键值。如果它是对象,则可以对其进行字符串化。

const tree = this.router.createUrlTree([], { queryParams: {productImpacted:this.productImpacted, Division: this.businessUnit, Region: JSON.stringify(this.regionFilter),OU:this.operatingUnit} });
  console.log(this.serializer.serialize(tree)); // "/?foo=a&bar=42"
  selBox.value = window.location.href+this.serializer.serialize(tree);

您可以使用以下代码从查询参数中检索数据

 this.route.queryParams.subscribe(params => {

    var data = params[key]

});

© www.soinside.com 2019 - 2024. All rights reserved.