首页 > 解决方案 > Angular5,在路由上,网址发生了变化,但它没有加载相同的页面

问题描述

单击下一步时,URL 正在发生变化,但根据 url 的页面没有加载。当我单击下一步时,网址会更改,如果我使用相同的网址刷新页面,则会加载正确的页面。下面是我的 ts 和 html 代码。

关于 ts

  ngOnInit() {
    const queryParams = this.route.snapshot.queryParams; // store query param value
    this.index = queryParams.index;
    this.step = queryParams.step;
    this.flowType = queryParams.flowType;
    this.stepper.selectedIndex = Number(this.step);
    console.log(this.index, "this.index", this.step, "this.step",  this.flowType, " this.flowType");
  }

在 HTML 上

<div *ngIf="flowType === 'Prescription Drug Plan'">
  <app-form-navigation   (customHandle)="setApplicationQualification()" isQueryParamPreserve='true'
    nextPath="enrollments/steps/find-a-drug" [queryParams]='{index:2, step:0}' >
  </app-form-navigation>
</div>

标签: angular

解决方案


如果您不离开它,Angular 将不会重新加载相同的组件。你应该使用类似的东西:

constructor(protected route: ActivatedRoute){
}
ngOnInit(){
    this.route.queryParams.subscribe(params => this._init(params));
}
_init(queryParams){
    this.index = queryParams.index;
    this.step = queryParams.step;
    this.flowType = queryParams.flowType;
    this.stepper.selectedIndex = Number(this.step);
    console.log(this.index, "this.index", this.step, "this.step",  this.flowType, " this.flowType");

}

推荐阅读