点击过滤器组件中的“运行报告”按钮时,
我正在尝试使用
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);
}
});
}