Блог

У меня есть два компонента:

Планирование семестра:

 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);
  }
  

Я был бы очень признателен за помощь.

Angular не сохраняет статистику при перезагрузке приложения или при доступе непосредственно с URL-адреса, поэтому вы должны использовать атрибут routerlink в <a> теге для навигации. Я не знаю, используете ли вы routerlink или href. Это не актуальная проблема, но, как вы сказали, вы можете использовать localStorage или выполнить проверку на серверной части (лучше). Я не знаю, что вы имели в виду, говоря «Использование localStorage было бы хорошо, но если пользователь переключит браузер, это больше не будет работать». если вы хотите сохранить такую информацию в разных браузерах, вам нужно сохранить ее в базе данных.

Это видео на Youtube может помочь вам узнать, как сохранить данные в приложении Angular Angular 6 Учебник 19: сеанс постоянного входа в систему