問題： angular 從子狀態回到當前的父級狀態的時候，父級狀態不會從新初始化。html
https://github.com/angular-ui/ui-router/issues/2992react
原文：https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2git
------------------------------------------------github
Back in the days of AngularJS you were able to reload a route even if you were already viewing it. For example, clicking on the home option of a menu when you are already viewing the homepage would refresh the homepage. This was useful for a number of reasons, but most importantly for UX. Users expect to be able to click on a page menu item and have the page re-initialise. Setting up this type of reloading in AngularJS was straightforward. You could invoke reload() in your router and away you went.typescript
When Angular 2 was released this feature was not present in the router and there was no easy way to reload the active route. Many people developed 「hacky」 techniques such as bouncing through a second route in the A -> B -> A sequence, effectively sending you off to a page and back again to trigger the reload. That had the desired effect but was rather inefficient. Another technique that was often suggested was outright reloading the page, which for a single page application is a bad idea.app
As of Angular 5.1 there is a supported technique for route reloading. This can now be done using the onSameUrlNavigation
configuration option as part of the built-in Angular router. Unfortunately, the documentation does not make it very clear on how to implement it, so I have documented my approach below.less
The first thing you will need to do is set the option within your app.routing.tsif you have one, or the file where your app routing is configured in your particular project.ide
There are two possible values for onSameUrlNavigation ’reload’ or false. The default value is false, causing nothing to happen when the router is asked to navigate to the active route. We want to set this value to reload. It is worth noting reload does not actually do the work of reloading the route, it only re-triggers events on the router that we then need to hook into.post
@ngModule({
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
exports: [RouterModule],
})
To determine how those events are actually fired, you need to specify the runGuardsAndResolvers configuration option on your route. This can take one of three valuesfetch
paramsChange — only fire when route params have changed e.g. where the id in /user/:id changes
paramsOrQueryParamsChange — fire when a route param changes or a query param changes. e.g. the id or the limit property change in /user/:id/invites?limit=10
always — Always fire when the route is navigated
We want to specify always in this case. An example route definition is shown below.
export const routes: Routes = [
{
path: ‘invites’,
component: InviteComponent,
children: [
{
path: ‘’,
loadChildren: ‘./pages/invites/invites.module#InvitesModule’,
},
],
canActivate: [AuthenticationGuard],
runGuardsAndResolvers: ‘always’,
}
]
With these two changes your router is configured. The next step is to handle the events that your router will produce within one of your components. To do this you will need to import the Router into your component and then hook into the events of interest. In this example, I have hooked into the NavigationEnd event which is fired once the router has completed its navigation from one route to another. Due to the way we have configured the app, this will now fire even if you try to navigate to the current route.
export class InviteComponent implements OnInit, OnDestroy{
// ... your class variables here
navigationSubscription;
constructor(
// … your declarations here
private router: Router,
) {
// subscribe to the router events - storing the subscription so
// we can unsubscribe later.
this.navigationSubscription = this.router.events.subscribe((e: any) => {
// If it is a NavigationEnd event re-initalise the component
if (e instanceof NavigationEnd) {
this.initialiseInvites();
}
});
}
initialiseInvites() {
// Set default values and re-fetch any data you need.
}
ngOnDestroy() {
// avoid memory leaks here by cleaning up after ourselves. If we
// don't then we will continue to run our initialiseInvites()
// method on every navigationEnd event.
if (this.navigationSubscription) {
this.navigationSubscription.unsubscribe();
}
}
}
The heavy lifting goes into the initialiseInvites() method, this is where you reset properties to their default values and fetch data from services to get the component back to its initial state.
You need to repeat this pattern across each component that you would like to to reload, being sure to add the runGuardsAndResolvers option to each route in the routing file.
** Updated 05/03/2018 **
Thanks to Changyu Geng and Dennis de Laat for pointing this out in the comments.
I have added an unsubscribe handler in the ngOnDestroy hook in the above example.
As router.events is global, if we do not unsubscribe our event handler on component destruction then it will continue to fire for every NavigationEndevent across our application even when we are not on the invites screen. This is less than ideal because
a) We will be running our event handler for invites even if we are on another screen.
b) Every time we navigate back to invites we will resubscribe to the event. This would cause our initialise function to run n times, where n is the number of times we have landed on the invites page.
lastoperator on observables? reactivex.io/documentation/operators/last.html – Daniel W Strimpel Apr 8 '18 at 20:29lastnever does anything. What do you mean by last? YOUmean the last in the group. But the computer can wait 100 years for the stream to close, and that's whatlast()means to RxJS! So I think actuallylast()will NEVER return (it possibly might as the page is being unloaded but that's no use). – Simon_Weaver Jan 23 at 22:10