Angular 5路由中的queryParams列表为空

时间:2018-06-26 08:22:59

标签: angular typescript router optional-parameters angular-activatedroute

我是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,“观察者”:[],“ closed”:false,“ isStopped”:false,“ hasError”:false,“ thrownError”:null,“ _ value”:[{“ path”:“ article -details“,” parameters“:{}}]}

如果有人知道如何解决它,我将不胜感激:)

3 个答案:

答案 0 :(得分:0)

我建议您不要依赖Observables,而是获取路线快照。这将为您提供一个包含参数的简单对象。

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  console.log(this.route.snapshot.queryParams);
}

答案 1 :(得分:0)

您应该使用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'
      }
    });

答案 2 :(得分:0)

您可以在app.routing.module.ts中定义参数:

{ path: 'examplePath/:id', component: YourComponent},

并像这样发送:

this.router.navigate(['/examplePath/' + id]); (with @angular/router/Router)

然后在组件构造函数中可以获取参数(使用@ angular / router / ActivatedRoute):

this.activatedRoute.params.subscribe(params => {
    this.yourObject = params['id'];
}