Angular 6/7 Получение данных из API при возврате к ранее просмотренному маршруту - PullRequest
Новая
       24

Angular 6/7 Получение данных из API при возврате к ранее просмотренному маршруту

0 голосов
/ 29 ноября 2018

Я новичок в угловых и немного проблем.Я хочу направить пользователя на страницу ввода данных, где многие поля уже заполнены вызовом 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 { }

Данные отправляются в базу данных просто отлично, но маршрутизаторпохоже, не хочет вызывать базу данных более одного раза для идентификатора.

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Я нашел проблему.Angular работал просто отлично.Проблема возникла из проекта ASP.NET MVC, который вызывался API.По-видимому, .NET кеширует результат действия по умолчанию.Я добавил [OutputCache(NoStore = true, Duration = 0)] как атрибут ко всем методам, вызываемым Angular, и это, похоже, решило проблему.

0 голосов
/ 29 ноября 2018

Можете ли вы показать в Stabblitz.Кстати, ngOnInit вызывается только во время инициализации компонента.Поэтому, если вы находитесь на том же компоненте, ngOnInit не будет вызываться.

...