Angular 8, как вы выполняете обслуживание перед загрузкой страницы?

Question

Я просто хочу получить данные до загрузки страницы, чтобы иметь возможность отображать эти данные.

user.service.ts

export class UserService {

  constructor(private httpClient: HttpClient) { }

  getUserDetails(username) {
    return this.httpClient.get<User[]>(`http://localhost:8080/users/` + username)
    .pipe(
      map(
        userData => {
          console.log(userData);
          return userData;
        }
      )
    );
  }
}

account.component.ts

export class AccountComponent implements OnInit {

  username: string;

  ngOnInit(): void {
    throw new Error('Method not implemented.');
  }

  constructor(private authenticationService: AuthenticationService, private userService: UserService, private router: Router) {
    this.username = sessionStorage.getItem('username');
    this.userService.getUserDetails(this.username);
  }

  logout() {
    this.authenticationService.logOut();
  }
}

Answer 1

Вам нужно использовать распознаватель, чтобы сделать это. Резольвер - это класс, который реализует resolve<resolveType> и использует один метод resolve. В функции resolve вы можете использовать внедренный сервис для возврата наблюдаемой с вашими данными:

@Injectable({ providedIn: 'root' })
export class userResolver implements Resolve<anu> {
  constructor(private userService: UserService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<any>| {
    return this.userService.getUserById(route.paramMap.get('id'));
  }
}

В этом примере мы внедряем userService и используем метод для возврата к наблюдаемой. Обратите внимание, что я использую any, чтобы упростить здесь. В этом случае параметры route содержат текущий маршрут, который мы пытаемся найти. Допустим, /user/1. Мы можем использовать этот объект для получения информации о текущем маршруте, например, идентификатор пользователя.

Наш распознаватель может затем использоваться в маршруте конкретной страницы. Он будет запущен перед функцией onInit на странице. Чтобы добавить его на страницу, вам нужно вызвать функцию в resolve части ее маршрута:

let route =  [
      {
        path: 'user/:id',
        component: UserComponent,
        resolve: {
          hero /* the name we will use in the onInit to get the data */: Resolver /* our resolver */
        }
      }
    ])
...

Затем мы можем получить доступ к разрешенным данным в функции onInit:

export class UserComponent {
...
    constructor(private route: ActivatedRoute) {}

    ngOnInit(){
         this.route.subscribe(data => {
             // we do something with our data.
         });
    }
}

Более подробную информацию вы можете получить в официальных документах Angular ;

Answer 2

На вашем месте, чтобы получить асинхронные данные в моем шаблоне, я бы просто сделал:

<div *ngIf="myData !== null">
…
</div>

Этот простой трюк позволяет отображать асинхронные данные без ошибок.