Angular 4 不保留查询字符串参数

Question

我在 Angular 4.3.4 路由器中遇到查询字符串参数问题，该问题在调用后立即消失。我们最近从 Angular 2 迁移到 Angular 4。

在调用激活Route.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);
    });
}

Routing.ts ///

const appRoutes: Routes = [
{ path: "CreateBalanceTransfer", component: 
Createbalancetrancomponent.CreateBalanceTransferComponent }
, { path: "CreateExternalDeduction", component: 
Createexternaldeductioncomponent.CreateExternalDeductionComponent }
, { path: "EditExternalDeduction", component:  

, { path: "ChargeBackDeferral", component: Chargebackdeferralcomponent.ChargeBackDeferralComponent }

, { path: "ChargeBackDeferralException", component: Chargebackdeferralcomponent.ChargeBackDeferralComponent }

, { path: "BonusTransactionDelete", component: Bonustransactiondeletecomponent.BonusTransactionDeleteComponent }
, { path: "AmTransactionDelete", component: Amtransactiondeletecomponent.AmTransactionDeleteComponent }
, { path: "AmTransactionCaseDetails", component: Amtransactioncasedetailscomponent.AmTransactionCaseDetailsComponent }

, { path: "AmTransactionReinstate", component: Amtransactionreinstatecomponent.AmTransactionReinstateComponent }
, { path: "BonusTransactionUpdate", component: Bonustransactionupdatecomponent.BonusTransactionUpdateComponent }
, { path: "BonusTransactionCreate", component: Bonustransactioncreatecomponent.BonusTransactionCreateComponent }

, { path: "DebtSuspensionCase", component: Debtsuspensioncasecomponent.DebtSuspensionCaseComponent }
, { path: "BankruptcyOutcomeCase", component: Bankruptcyoutcomecasecomponent.BankruptcyOutcomeCaseComponent }

, { path: "RefusedPayment", component: Refusedpaymentadjustmentcomponent.RefusedPaymentAdjustmentComponent }
, { path: "RefusedPaymentReversal", component: Refusedpaymentreversaladjustmentcomponent.RefusedPaymentReversalAdjustmentComponent }
 , { path: "MoveFutureBalancetoCurrentMonth", component: MoveFutureBalancetoCurrentMonthcomponent.MoveFutureBalancetoCurrentMonthComponent}

];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes);

app.component.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;
}

模板

@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> 

 <div *ngIf="vm.FutureMonthList?.length == 0">
    <label for="AccountBalance">@CRCStrings.NoFutureMonths</label>
</div>

</form>

Answer 1

preserveQueryParams 已弃用，请改用queryParamsHandling

ngOnInit(): void {


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

Answer 2

@meghanath 我建议你将应用升级到 Angular 6 并重试

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

另外，你还可以把这段代码sn-p放到app.component.ts里面的ngOnInit()方法中来监控查询参数的变化：

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