1

我有一个服务，我可以通过这个简单的功能从我的后端获取学生列表

学生服务.ts

  getStudents(): Observable<Student[]> {
    return this.httpClient.get<Student[]>(this.studentsUrl, this.baseService.httpOptions);
  }

我已经设置了一个解析器在页面呈现给用户之前加载学生

学生解析器service.ts

export class StudentsResolverService implements Resolve<Student[]>{

  constructor(private studentsService: StudentsService) { }

      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Student[] | Observable<Student[]> {
        return this.studentsService.getStudents().pipe(
          catchError(error => {
            return empty();
          })
        )
      }
    }

路由.ts

{ path: '', component: HomeComponent, 
    children: [
      { path: 'students',
        loadChildren: () => import('../modules/students/students.module').then(m => m.StudentsModule),
        resolve: { students: StudentsResolverService }
    },

这是我的学生-component.ts

export class StudentsComponent implements OnInit {

  students: Student[];
  private _showNewStudentForm: boolean = false;

  constructor(
    private studentsService: StudentsService,
    private activatedRoute: ActivatedRoute
    ) { }

  ngOnInit(): void {
      this.activatedRoute.data.subscribe((data: { students: Student[] }) => {
      this.students = data.students;
      });
  }

  fetchStudents() {
    this.studentsService.getStudents().subscribe(
      (response: Student[]) => {
        this.students = response;
        this.students.forEach(student => console.log(student));
      },
      error => console.log(error)
    )
  }

  public get showNewStudentForm(): boolean {
    return this._showNewStudentForm;
  }

  public set showNewStudentForm(value: boolean) {
    this._showNewStudentForm = value;
  }

  toggleStudentForm() {
    this.showNewStudentForm = !this.showNewStudentForm;
  }

  toggleStudentFormHandler(emittedValue: any) {
    this.fetchStudents();
    this.toggleStudentForm();
  }

}

在students-component上，有一个用于创建新学生的弹出表单。一旦提交了该表单，它就会从组件中消失。我想从我的后端刷新学生列表，以便立即向用户显示全新创建的学生。不幸的是，解析器不会再次获取学生列表，因为在表单提交后路由不会刷新。所以问题来了。为了克服这一点，我编写了一个简单的fetchStudents()方法，它实际上与解析器执行完全相同的操作，但每次提交表单时都会调用它。我不喜欢这种方法，因为现在我的组件对学生服务有双重依赖：一个由解析器提供，一个由它自己提供。有没有办法仅通过解析器来完成这项工作？如果没有，在同一个组件中同时拥有解析器和服务（解析器最初从中获取相同数据）是否不好？

注意：为简洁起见，我省略了发布表单组件。它的作用是，当提交时，触发toggleStudentFormHandler方法，该方法又调用fetchStudents方法来检索新的学生列表

4

0 回答 0