我在Angular 4.3.4路由器中遇到Querystring参数问题，在调用完成后立即消失。我们最近从Angular 2迁移到Angular 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);
});
}
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>
答案 0 :(得分：0)
preserveQueryParams已弃用queryParamsHandling而不是
ngOnInit(): void {
this.setComponentNameFromUrl();
this.router.navigate([this.componentname], { queryParamsHandling: 'preserve' });
}
答案 1 :(得分：0)
@meghanath我建议您将应用程序升级到6号角，然后重试
this.router.navigate(['/somepage'], { queryParamsHandling: 'preserve' });
此外，您可以将该代码段放置在ngOnInit（）方法内的app.component.ts中，以监视查询参数的更改：
this.route.queryParams.subscribe(params => {
console.log(params);
})