Angular 5 路由中的 queryParams 列表为空

Question

我是 Angular 的新手，我一直在寻找我的问题的解决方案，但不幸的是我还没有找到。当我将参数传递给路由器（路由器类）时，但参数列表（在目标站点上）为空。

let navigationExtras: NavigationExtras ={
  queryParams: {
    uri: item.uri
  }
}

this.router.navigateByUrl('articlelist/article-details', navigationExtras);

文章详细信息组件（路由是 ActivatedRoute 类）：

   ngOnInit(): void {
        console.log("ArticleDetailsComponent " + JSON.stringify(this.route.url));
    this.route.queryParamMap.map(paramMap =>{
            this.uri = paramMap.get('uri');
            console.log(this.uri);
        });
    }

在 ArticleList 模块（我的项目中的模块之一）中路由：

const routes: Routes = [{
  path: '',
  component: ArticleListComponent,
    data: {
      title: 'ArticleList'
    },
  },
{
  path: 'article-details',
  component: ArticleDetailsComponent,
  data: {
    title: 'ArticleDetails'
  },
}
];

当我在目标组件中记录 route.url 时，结果是：

ArticleDetailsComponent {"_isScalar":false,"observers":[],"closed":false,"isStopped":false,"hasError":false,"thrownError":null,"_value":[{"path":"文章详细信息","参数":{}}]}

如果有人知道如何修复它，我将不胜感激:)

Answer 1

你应该需要使用 ActivatedRoute才能获取所有查询参数。

尝试这个 -

constructor(
    private activatedRoute: ActivatedRoute
  ) { }

this.activatedRoute.queryParams.subscribe(params => {
      const URI = params['uri'];
    });

更新

尝试发送这样的参数 -

this.router.navigate(['articlelist/article-details' ], {
      queryParams: {
        uri: item.uri || 'Default'
      }
    });