在Angular中,使用router.navigate
进行路由导航时,确实不会再次调用相同组件上的Resolver。这是因为Angular认为在同一组件上进行导航时,组件实例已经存在且不需要再次调用Resolver来获取数据。
如果你想在同一组件上调用Resolver并重新获取数据,可以使用以下解决方法:
router.navigate
导航到这个新组件。在原始组件中:
import { Router } from '@angular/router';
constructor(private router: Router) {}
navigateToNewComponent() {
this.router.navigate(['/new-component']);
}
在路由模块中定义新组件的路由:
import { NewComponent } from './new-component/new-component.component';
const routes: Routes = [
{ path: 'new-component', component: NewComponent, resolve: { data: ResolverService } }
];
router.navigateByUrl
方法指定一个不同的URL来导航到同一组件,并在URL上添加查询参数或片段来触发Resolver重新获取数据。在原始组件中:
import { Router } from '@angular/router';
constructor(private router: Router) {}
refreshComponent() {
const currentUrl = this.router.url;
this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
this.router.navigate([currentUrl]);
});
}
在路由模块中定义组件的路由:
import { MyComponent } from './my-component/my-component.component';
const routes: Routes = [
{ path: 'my-component', component: MyComponent, resolve: { data: ResolverService } }
];
这两种方法都可以在同一组件上调用Resolver并重新获取数据。选择哪种方法取决于你的具体需求和应用程序的架构。