Angular 角度4不'；不保留查询字符串参数

我对Angular 4.3.4路由器中的Querystring参数有疑问，该参数在呼叫后立即消失。我们最近从角度2迁移到角度4

调用activatedRoute.Queryparams.subscribe时，url不会保留Queryparams。感谢您的帮助

我的部分组件代码如下所示

constructor(private customFormService: CustomFormServices, private 
activatedRoute: ActivatedRoute, private ref: ChangeDetectorRef, private 
numberFormatPipe: NumberFormatPipe, private convertedNumberFormatPipe: 
ConvertedNumberFormatPipe, private router: Router) {

}
ngAfterViewInit(): void {


    var self = this;
    self.routerSub = self.activatedRoute.queryParams.subscribe((params: any) => {

       console.log(params);
        self.customFormDataUrl = System
            .getFullyQualifiedUrlWithParams("cammanager/camcf/getmovefuturebalancetocurrentmonthdata", params);
        self.validateCustomFormDataUrl = System
            .getFullyQualifiedUrlWithParams("cammanager/camcf/ValidatemovefuturebalancetocurrentMonthdata", params);

        self.initializeCustomFormData();
    });
    self.samportalc.subscribe(SamComTopics.Validate, () => {
        self.validate();
        if (self.validationMessages.length > 0) {
            return self.samportalc.validateResponse(false, self.validationMessages);
        } else {
            return self.samportalc.validateResponse(true, null);
        }
    });
    self.samportalc.subscribe(SamComTopics.SaveTicket, () => {
        var data = self.formData;

        var errors = self.validationMessages.length > 0 ? self.validationMessages : null;
        return self.samportalc.saveResponse(self.validationMessages.length === 0, data, errors);
    });
}

路由。ts ///

应用程序组件.ts

///<reference path="../../typings/jquery/jquery.d.ts" />
import { Component, OnInit, AfterViewInit, ElementRef} from "@angular/core";
import {CustomFormServices} from "../cfcommon/customform.services";
import { Router, NavigationEnd ,ActivatedRoute } from "@angular/router";
 @Component({
selector: "customform",
template: "<router-outlet></router-outlet>"
})

export class CustomFormComponent implements OnInit {

private componentname: string;

constructor(private router: Router) {
console.log(router);
}

ngOnInit(): void {

    const navigationExtras = {
        preserveQueryParams: true,
        preserveFragment: true
    };
    this.setComponentNameFromUrl();
    this.router.navigate([this.componentname], navigationExtras);
}

private setComponentNameFromUrl(): void {
   console.log("location Path-"+window.location.pathname);
    this.componentname = 



 window.location.pathname.substring
(window.location.pathname.lastIndexOf("/"));
}
}

export interface ICustomFormComponent extends AfterViewInit {
customFormDataUrl: string;
validateCustomFormDataUrl: string;
formData: string;
validationMessages: string[];
ngAfterViewInit(): void;
initializeCustomFormData(): void;
validate(): void;
formInitialized: boolean;
ngOnDestroy(): void;
}

///
从“@angular/core”导入{Component，OnInit，AfterViewInit，ElementRef}；
从“./cfcommon/customform.services”导入{CustomFormServices}；
从“@angular/Router”导入{Router，NavigationEnd，ActivatedRoute}；
@组成部分({
选择器：“自定义表单”，
模板：“”
})
导出类CustomFormComponent实现OnInit{
私有组件名称：字符串；
构造函数（专用路由器：路由器）{
控制台日志（路由器）；
}
ngOnInit（）：void{
常数navigationExtras={
preserveQueryParams：对，
这是真的
};
this.setComponentNameFromUrl（）；
this.router.navigate（[this.componentname]，navigationExtras）；
}
私有setComponentNameFromUrl（）：void{
log（“位置路径-”+window.location.pathname）；
this.componentname=
window.location.pathname.substring
（window.location.pathname.lastIndexOf（“/”）；
}
}
导出接口ICustomFormComponent在ViewInit之后扩展{
customFormDataUrl:字符串；
validateCustomFormDataUrl:字符串；
formData：字符串；
validationMessages:字符串[]；
ngAfterViewInit（）：void；
initializeCustomFormData（）：void；
validate（）：void；
formInitialized：布尔型；
ngOnDestroy（）：void；
}

模板

@using Example..Web.Resources

<div class="col-sm-12 ;-padding">
<h5>@CRCStrings.MoveFutureBalance </h5>
</div>
<form novalidate=""  name="movefuturebalancetocurrentmonthForm" 
[LoadingContent]="!formInitialized" >
<div *ngIf="vm.FutureMonthList?.length > 0">
   <div class="form-group row" *ngFor="let month of vm.FutureMonthList;let 
i=index" style="margin:5px;">

 <div class="col-sm-1" style="text-align: right;"><label 
 for="AccountBalance" style="display: block;">{{month.FutureMonth| date: 
'MMMM'}}</label></div>
  <div class="col-sm-1"><label 
  for="AccountBalance">@CRCStrings.Balance</label></div>
  <div class="col-sm-1"><input type="text" id="Balance{{month.FutureMonth}}" 
  name="Balance{{month.FutureMonth}}" [(ngModel)]="month.Amount" 
  class="form-control input-sm text-right" [disabled]="true" /></div>
  <div class="col-sm-1"><input class="form-control " 
   id="Balance{{month.FutureMonth}}" name="Balance{{month.FutureMonth}}" 
   type="checkbox" [checked]="month.Checked" [disabled]="vm.IsReadOnly" 
  (change)="onChange(i,$event)"></div>
   </div>
   <div class="form-group row" style="margin:15px;">
   <div class="col-sm-1 " style="text-align: right;"> <label 
   for="AccountBalance" style="display: 
    block;">@CRCStrings.TotalAmountSelected</label></div>
    <div class="col-sm-2"><input type="text" id="TotalAmount" 
    name="TotalAmount" class="form-control input-sm text-right" 
    [(ngModel)]="vm.TotalAmount" [disabled]="true" style="width: 100% 
   !important; max-width: 100% !important;" /> </div>
   </div>
   <div class="form-group row" style="margin:15px;">
       <div class="col-sm-1 " style="text-align: right;"> <label 
    for="Description" style="display: 
    block;">@CRCStrings.FutureBalaceDescription</label></div>
    <div class="col-sm-4"><input type="text" id="description" 
    name="description" [(ngModel)]="vm.Description" class="form-control 
    input-sm text-right"  style="width: 100% !important; max-width: 100% 
   !important; " /> </div>
   </div>
   <div class="form-group row" style="margin:5px;">
       <div class="col-sm-1 text-right" style="text-align: right;"> <label 
     for="AccountBalance" style="display: block;">@CRCStrings.Notes</label>
     </div>
       <div class="col-sm-4">
           <textarea id="Comment"
                     name="Comment"
                     class="form-control"
                     block-typing=""
                     rows="4"
                     ng-maxlength="250"
                     [(ngModel)]="vm.Notes"
                     [disabled]="vm.IsReadOnly"
                     ispastingblocked="vm.commentPastingBlocked"
                     [attr.maxLength]="250"
                     style="width: 100% !important; max-width: 100% 
 !important;"></textarea>
           <div class="text-muted">
               @CRCStrings.CommentMaxLength
           </div>
       </div>

   </div> 

@使用示例..Web.Resources
@CRCStrings.movefutureball
{{月.未来月|日期：
“嗯”}
@平衡，平衡
@CRCStrings.TotalAmountSelected
@CRCStrings.未来平衡描述
@CRCStrings.Notes
@CRCStrings.CommentMaxLength

@CRCStrings.no未来数月

preserveQueryParams

不推荐使用

queryParamsHandling

ngOnInit(): void {


    this.setComponentNameFromUrl();
    this.router.navigate([this.componentname], { queryParamsHandling: 'preserve' });
}

---

@meghanath我建议您将应用程序升级到angular 6，然后重试

this.router.navigate(['/somepage'], { queryParamsHandling: 'preserve' });

此外，您还可以将此代码段放在app.component.ts中的ngOnInit（）方法中，以监视查询参数的更改：

  this.route.queryParams.subscribe(params => {
  console.log(params);
})

---

如何导航？显示代码并显示模板添加代码和模板是的，我已经尝试了两种方法。用质问的方式也不起作用。感谢您的快速回复。请尝试

queryParamsHandling:“merge”

这篇文章可能会帮助您，“merge”也不起作用。我相信url甚至在ngoniti（）之前就忽略了参数。我尝试记录total router并检查它是否包含任何参数。我没有看到任何参数。你找到解决办法了吗@梅加纳思

this.router.navigate(['/somepage'], { queryParamsHandling: 'preserve' });

  this.route.queryParams.subscribe(params => {
  console.log(params);
})