更改参数

时间:2018-04-10 10:13:21

标签: angular angular-routing

点击过滤器组件中的“运行报告”按钮时,
我正在尝试使用

导航到报告结果页面
this.router.navigate([this.getReportRouteByID()], {queryParams: {filters: JSON.stringify(this.filtersParamsData)}});

问题在于,当我在过滤器组件中更改所选值的集合时 - 报告结果页面不会引用,这意味着 - 它不会“考虑”新的过滤器集。 目前,“目标”组件中的相关代码(运行报告)是 在ngOnInit函数中。我已经尝试将代码放在ngOnChanges函数中 - 但没有任何反应。 看我的代码: 这是过滤器组件中的函数(每当我更改所选过滤器并执行 runReport 函数的每次更改时,我都希望执行该函数):

runReport()
{
    this.filtersData.forEach (filter => this.populateFilterData (filter));
    let queryParameters : Params = this.filtersParamsData;

     this.router.navigate([this.getReportRouteByID()], {queryParams: 
     {filters: JSON.stringify(this.filtersParamsData)}});

}

这是“目标”组件中的代码: 原来 - 错误:

ngOnInit() 
{
    this.route.queryParams.subscribe((parameters : any) => 
    {
       this.reportSelectedFilters = JSON.parse(parameters.filters)
    });

    this.reportServiceService.setSelected...
}

已修复 - 删除ngOnInit并改为使用构造函数:

constructor(private route: ActivatedRoute, private reportServiceService : 
   ReportService, private phrases : Phrases  )  
{
   this.route.queryParams.subscribe((parameters : any) => 
    {
       this.reportSelectedFilters = JSON.parse(parameters.filters)
    //Set the report data also - whenever filters data change:
    this.reportServiceService.setREportData..
   });
}

这是过滤器组件的(精简版)容器和“目标”组件(app-cadaster-report-filters是过滤器组件):

<div >
    <app-cadaster-report-filters [filtersData]='filters' [name]='reportName' 
  [reportID]='reportID' ></app-cadaster-report-filters>
</div>

<div class="router-outlet-container">
    <router-outlet></router-outlet>
</div> 

这是组件代码:

constructor(private activatedRoute: ActivatedRoute, private filterService 
: FilterService) 
{
    this.activatedRoute.queryParamMap
   .subscribe((params:ParamMap) => {
    if (params.has("id"))
    {
      this.reportID = +params.get('id');


    var Report : Report = new Report(this.filterService, this.reportID); 
    Report.getFiltersData().subscribe(result => 
           this.setFilters(result), error => console.log);
  }
});

}

0 个答案:

没有答案