#angular
#angular
Вопрос:
У меня есть два компонента:
Планирование семестра:
onSubmit(student: Student) {
this.studentService.postStudent(student).subscribe((s) => {
this.router.navigate(['home-page/semester-planning/classes-planning/' s.id]);
});
}
И планирование классов, которое перенаправляется из планирования семестра, которые извлекают учащегося по идентификатору, а затем отображают информацию:
ngOnInit(): void {
this.studentId = this.route.snapshot.paramMap.get('id');
}
ngAfterViewInit(): void {
this.getStudent().subscribe(student => {
this.dateProcessed = this.processDate(student.startDate, student.endDate);
})
}
getStudent(): Observable<Student> {
return this.studentService.getStudent(this.studentId);
}
Это маршрутизатор для обоих компонентов:
{
path: 'semester-planning',
component: SemesterPlanningComponent,
canActivate: [AuthGuard, StudentGuard],
},
{
path: 'semester-planning/classes-planning/:id',
component: ClassesPlanningComponent,
canActivate: [AuthGuard],
}
Это работает нормально, если пользователь уже не перешел к планированию занятий и не нажал, чтобы перейти к планированию семестра, и они снова перенаправляются на это, хотя уже отправили данные.
Я хотел бы запретить перенаправление на планирование семестра, если пользователь уже отправил данные и перешел к планированию классов. Я попытался создать student guard ниже, но не знаю, как проверить, отправил ли ученик уже данные (перешел к классам-планирование). Использование localStorage было бы хорошо, но если пользователь переключит браузер, он больше не будет работать.
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
if (
// check if the student submitted the data?
) {
this.router.navigate(['home-page/semester-planning/classes-planning/']);
return false;
}
return true;
}
Код из student-service, который взаимодействует с сервером (если это удобно):
getStudent(id: String): Observable<Student> {
const student = this.http.get<Student>(environment.baseUrl "/api/student/" id);
return student;
}
postStudent(student: Student): Observable<any> {
return this.http.post(environment.baseUrl "/api/student", student);
}
Я был бы очень признателен за помощь.
Ответ №1:
Angular не сохраняет статистику при перезагрузке приложения или при доступе непосредственно с URL-адреса, поэтому вы должны использовать атрибут routerlink в <a>
теге для навигации. Я не знаю, используете ли вы routerlink или href. Это не актуальная проблема, но, как вы сказали, вы можете использовать localStorage или выполнить проверку на серверной части (лучше). Я не знаю, что вы имели в виду, говоря «Использование localStorage было бы хорошо, но если пользователь переключит браузер, это больше не будет работать». если вы хотите сохранить такую информацию в разных браузерах, вам нужно сохранить ее в базе данных.
Это видео на Youtube может помочь вам узнать, как сохранить данные в приложении Angular Angular 6 Учебник 19: сеанс постоянного входа в систему
Комментарии:
1. Кроме того, если вы хотите использовать хранилище, рассмотрите возможность использования IndexedDB вместо localStorage. Смотрите это видео на YouTube для получения дополнительной информации.
2. Это означает, что когда я переключаю веб-браузер и перехожу к компоненту планирования семестра, он по-прежнему позволяет мне перейти туда, хотя я отправил данные и перешел к компоненту планирования занятий.