Невозможно предварительно извлечь данные с помощью резольвера на угловых 7

Question

У меня проблемы с предварительной загрузкой данных API, но, похоже, я не понимаю их правильно. Маршрут все еще активируется до того, как данные будут получены. Я пытаюсь использовать службу распознавателя в angular 7 для загрузки списка пользователей.

Здесь у вас есть мой распознаватель маршрутов в модуле маршрутизации:

`const routes: Routes = [
  {
    path: 'list', 
    component: ShowListComponent, 
    resolve: {personList: ResolverService}
  },
  {path: 'add', component: AddComponent},
  {path: 'edit', component: EditComponent},
  {path: 'edit/:id', component: EditComponent}
];`

Здесь я вызываю свой преобразователь:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute} from '@angular/router';
import {ServiceService} from '../../Service/service.service';
import { Person } from 'src/app/Model/Person';


@Component({
  selector: 'app-show-list',
  templateUrl: './show-list.component.html',
  styleUrls: ['./show-list.component.css']
})
export class ShowListComponent implements OnInit {

  persons:Person[];
  constructor(private service:ServiceService, private aRoute: ActivatedRoute ) { 

  }

  ngOnInit() {
    // Invoking resolver service
    this.persons = this.aRoute.snapshot.data['personList'];

  }
}

Это моя служба распознавания:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Person } from '../Model/Person';
import { Observable} from 'rxjs';
import { ServiceService } from './service.service';


@Injectable({
  providedIn: 'root'
})
export class ResolverService implements Resolve<Person[]> {


  constructor(private _persons: ServiceService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Person[]> | Observable<never> {
    return this._persons.getPersons();      
  }
}

И, наконец, это моя реализация сервиса:

import { Injectable, OnInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Person} from '../Model/Person';
import { identifierModuleUrl } from '@angular/compiler';


@Injectable({
  providedIn: 'root'
})
export class ServiceService  {

  persons: Person[];
  constructor(private http: HttpClient) { }


  List = 'http://localhost:8080/todoangular/persons';

  getPersons() {
    return this.http.get<Person[]>(this.List);
  } 
}

Answer 1

Я думаю, что вы создаете одноэлементный экземпляр вашего ResolverService. Таким образом, эта служба создается только один раз, причем любое состояние находится в ActivatedRouteSnapshot на момент ее создания.

Посмотрите на Angular docs , и вы заметите, что они украшают распознаватель только с помощью Injectable () (не предусмотрено в: 'root'). Затем они передают ResolverService в массив поставщиков для модуля.