如何刷新路线的解析数据
How to refresh a route's resolved data
考虑以下路由配置:
const routes: Routes = [
{
path: '',
component: AppComponent,
resolve: {
app: AppResolver
},
children: [
{
path: 'user/:uid',
resolve: {
user: UserResolver
},
children: [
{
path: '',
component: ViewUserComponent
},
{
path: 'edit',
component: EditUserComponent
}
]
}
]
}
];
UserResolver
为路线 /user/:uid
的任何 children 检索了用户数据。
使用此数据,可以通过导航到 /user/:uid
查看用户配置文件,然后通过导航到 /user/:uid/edit
进行编辑。
成功编辑后,人们会期望被重定向到用户的更新个人资料(/user/:uid
)。
但是,查看和编辑页面都是已解析路由的 children,从一个导航到另一个时不会触发解析器。
因此,当从编辑组件导航回视图组件时,显示的数据仍然是旧的,non-updated。
是否有任何方法可以使已解析的 user
数据无效以强制解析器从服务器再次获取它?或者还有其他方法可以达到这种效果吗?
app
数据没有改变,我们不应该重新加载它。
您可以在路由配置中使用一个名为 'runGuardsAndResolvers' 的参数,它会影响解析器 运行 的时间。在这种情况下,您可能希望将其设置为 'always'。这意味着只要该路由的子路由发生变化,解析器就会 运行 。有关详细信息,请参阅 the route documentation。
我已经测试了解决方案 'runGuardsAndResolvers',它适用于我的用例,每次子页面更改时都会调用解析器。
它只是将此选项添加到您希望以这种方式表现的路线部分。
export const ROUTES: any = [
{
path: 'project/:name',
runGuardsAndResolvers: "always",
component: ProjectComponent,
resolve: { project: ProjectResolver },
children: [
...
通过上面的方式我可以调用解析器。但它不会更改来自我的后端服务器的数据,所以我得到了一个解决方案,我在成功部分再次调用了我的服务方法,并从后端服务器获取了新的更改数据。
您可以尝试这样的操作:
constructor(private activatedRoute: ActivatedRoute) {
this.activatedRoute.parent.data.subscribe(data => {
this.profile = data.profile;
});
}
updateProfile(newProfile) {
(this.activatedRoute.parent.data as BehaviorSubject<any>).next({profile: newProfile});
}
考虑以下路由配置:
const routes: Routes = [
{
path: '',
component: AppComponent,
resolve: {
app: AppResolver
},
children: [
{
path: 'user/:uid',
resolve: {
user: UserResolver
},
children: [
{
path: '',
component: ViewUserComponent
},
{
path: 'edit',
component: EditUserComponent
}
]
}
]
}
];
UserResolver
为路线 /user/:uid
的任何 children 检索了用户数据。
使用此数据,可以通过导航到 /user/:uid
查看用户配置文件,然后通过导航到 /user/:uid/edit
进行编辑。
成功编辑后,人们会期望被重定向到用户的更新个人资料(/user/:uid
)。
但是,查看和编辑页面都是已解析路由的 children,从一个导航到另一个时不会触发解析器。
因此,当从编辑组件导航回视图组件时,显示的数据仍然是旧的,non-updated。
是否有任何方法可以使已解析的 user
数据无效以强制解析器从服务器再次获取它?或者还有其他方法可以达到这种效果吗?
app
数据没有改变,我们不应该重新加载它。
您可以在路由配置中使用一个名为 'runGuardsAndResolvers' 的参数,它会影响解析器 运行 的时间。在这种情况下,您可能希望将其设置为 'always'。这意味着只要该路由的子路由发生变化,解析器就会 运行 。有关详细信息,请参阅 the route documentation。
我已经测试了解决方案 'runGuardsAndResolvers',它适用于我的用例,每次子页面更改时都会调用解析器。
它只是将此选项添加到您希望以这种方式表现的路线部分。
export const ROUTES: any = [
{
path: 'project/:name',
runGuardsAndResolvers: "always",
component: ProjectComponent,
resolve: { project: ProjectResolver },
children: [
...
通过上面的方式我可以调用解析器。但它不会更改来自我的后端服务器的数据,所以我得到了一个解决方案,我在成功部分再次调用了我的服务方法,并从后端服务器获取了新的更改数据。
您可以尝试这样的操作:
constructor(private activatedRoute: ActivatedRoute) {
this.activatedRoute.parent.data.subscribe(data => {
this.profile = data.profile;
});
}
updateProfile(newProfile) {
(this.activatedRoute.parent.data as BehaviorSubject<any>).next({profile: newProfile});
}