Question

在我的页面上，点按一个按钮会根据用户的输入更改路线参数。

注意：此表单始终位于页面顶部

HTML：

<form [formGroup]="houseFrom">
    <input type="text" placeholder="ID" formControlName="id">
    <button (click)="openHouseDetails()">Go</button>
</form>

组件：

openHouseDetails(){
   const form = this.houseFrom.value;
   this.router.navigate(['chen/house',form.id]);
}

应用程序的路由：

...
path:'chen',
children:[
   {path:'house/:id', component:HouseComponent}
   ...
]

在HouseComponent＆gt; ngOnInit方法，使用与路由一起发送的参数调用某些服务。

现在出现问题：

如果用户插入id并单击该按钮，则URL会更改为ok并且HouseComponent已正确加载。

但是如果用户现在再次点击按钮，具有相同的ID，则URL不会更改（这很好），但由于此原因，组件未再次加载，所以没有再次调用ngOnInit。

这对我们来说不是预期的行为，因为在HouseComponent的ngOnInit中调用的服务可以在一段时间后返回不同的细节，因此每次单击该按钮时它都应该再次调用该服务。

即使未更改网址，如何强制重新加载组件？

Answer 1

您可以在导航后调用您的服务：

this.router.navigate(['chen/house',form.id])
  .then(() => this.callYourService());

或

this.router.navigate(['chen/house',form.id])
  .then(() => this.ngOnInit());

Answer 2

尝试window.reload

openHouseDetails(){
   const form = this.houseFrom.value;
   if(!this.router.url.includes(`chen/house/${form.id}`))//check if user is on current page
   this.router.navigate(['chen/house',form.id]);
   else
   location.reload()
}

即使url没有被更改，Angular2 force组件也会在路由时重新加载

2 个答案: