Question

我是新手，有点麻烦。我想将用户定向到数据输入页面，在该数据输入页面中，通过记录ID通过对数据库的api调用已填充了许多字段。然后，用户将编辑其中一些字段，保存数据，然后继续。一切正常。问题是，如果用户转到另一个页面并执行其他操作，然后导航回他们进行初始数据输入的那个URL，则页面上显示的数据是最初获取的数据，而不是数据那被张贴了。我设置了一个路由器，还有一个解析器来延迟页面的加载，直到从api中获取所有数据为止，但是api似乎只被调用一次，而不是每次加载页面时都被调用。

我的解析器：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<ProjectVM> {
    let id = route.paramMap.get('id');
    return this.apiService.getProject(id).pipe(
        take(1),
        map(projectVM => {
            if (projectVM) {
                return projectVM;
            } else {
                this.router.navigate(['/projects']);
                return null;
            }
        }))
}

我的组件

ngOnInit(): void {
    this.route.data.subscribe((data: { projectVM: ProjectVM }) => {
        this.projectVM = data.projectVM;
    });
}

路由模块：

const routes: Routes = [
    { path: '', redirectTo: '/projects', pathMatch: 'full', runGuardsAndResolvers: 'always' },
    { path: 'projects', component: MyProjectsComponent },
    { path: 'project/:id', component: ProjectOverviewComponent, runGuardsAndResolvers: 'always', resolve: { projectVM: ProjectResolver } },
];

@NgModule({
    imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
    exports: [RouterModule],
    providers: [
        { provide: APP_BASE_HREF, useValue: '/' },
        ProjectResolver,
        LeaseResolver,
        ProjectSearchResolver,
        LeaseSearchResolver
                ]  
})
export class AppRoutingModule { }

数据可以很好地发布到数据库，但是路由器似乎不想每个ID多次调用数据库。

Answer 1

能请您以堆叠闪电战的方式展示。 Btw ngOnInit仅在组件初始化期间被调用。因此，如果您使用的是同一组件，则不会调用ngOnInit。

Answer 2

我发现了问题。 Angular工作得很好。问题来自API调用的ASP.NET MVC项目。默认情况下，.NET似乎会缓存操作结果输出。我为Angular调用的所有方法添加了[OutputCache(NoStore = true, Duration = 0)]作为属性，这似乎已经解决了问题。

Answer 3

这可能是因为您在编辑/创建请求完成之前正在导航。我花了3/4天的时间解决了这个问题，只是在当前请求完成后才返回。见下文：

解决之前：

create() {
    this.deptService.addDept(this.dept).subscribe();
    //This line will execute before the above action completed.. 
    this.router.navigate(['department']);
  }

解决后：

create() {
    this.deptService.addDept(this.dept).subscribe((data) => {
        //navigate after the request has been completed!
        this.router.navigate(['department']);
      },
      (error) => {
        alert('Error occurred!');
      });
  }

或

create() {
    this.deptService.addDept(this.dept).
      toPromise().then(x => {
        //navigate after the request has been completed!
        this.router.navigate(['department']);
      });
  }

返回到先前查看的路线时，Angular 6/7从API获取数据

3 个答案: