-2

我想在.navigate()angular 8 路由模块中发送一组数据。

在 home 组件中，结果为：

console.log(this.offers)

正在返回所有可用的报价及其所有相关数据。

之后，我this.offers在导航中发送：

this.router.navigate(['/offers'], {queryParams:{ 'offers': this.offers}});

在优惠组件中，我尝试使用以下方法获取优惠数组：

console.log(this.activatedRouter.snapshot.queryParams.get('offers'))

但结果只是[Object Object]。

我尝试使用this.activatedRouter.snapshot.params['offers']，但它返回了同样的东西。

我尝试了以下方法：

console.log(this.activatedRouter.snapshot.queryParamMap.get('offers'))

但它返回了一个 [Object Object]：

在此处输入图像描述

4

2 回答 2

1

而不是使用activatedRouter.snapshot，订阅this.activatedRoute.queryParams流，它会主动发出查询参数的任何更改。

@Component({ ... })
export class MyComponent implements OnInit {
  order: string;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.offers)
      .subscribe(params => {
        console.log('Query Params: ', params); // {offers: <value>}
      });
  }
}
于 2019-08-23T22:10:24.367 回答
0

根据介质上的此链接，有几种解决方案。

我需要的是使用this.navigate.

所以解决方案是在原始组件：

this.router.navigate(['/offers'], { state: {'offers': this.offers, 'info': this.info}});

在我的情况下不是子组件的目标组件（它可以，没问题），我们应该使用stateAngular 7.2+ 中的新增功能：

this.offers = window.history.state.offers;

在这种情况下我们不能使用snapshotor queryParams，根据上面的链接，它会在ngOnInit()执行后被删除。所以最好的解决方案是使用state额外的

于 2019-08-24T08:08:26.677 回答