Angular6 синхронно загружает данные маршрута

Question

Хорошо, я недавно внедрил SSR в свое приложение Angular6 с целью рендеринга динамического HTML. Кажется, все работает нормально, но моя проблема - рендеринг данных с конечной точки API.

Как только пользователь заходит на мой сайт, будет отображаться список топ-сообщений, которые были получены с Node-сервера. Для того, чтобы получить данные до загрузки страницы, я реализовал распознаватель для службы сообщений. Средство распознавания разрешит Observable, который затем будет доступен моему компоненту.

resolver.service.ts:

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { PostService } from '../services/post.service';
import { of } from 'rxjs';


@Injectable()
export class ResolverService implements Resolve<any> {
  constructor(private postService: PostService) { }

  resolve (){
    return of(this.postService.getPosts());
  }
}

Этот Observable будет правильно разрешен и может быть доступен в моем компоненте, например,

content.component.ts:

  ...
  posts: any;

  constructor(private route:ActivatedRoute){}

  ngOnInit() {
    this.route.snapshot.data['posts'].subscribe(
      data =>{
        this.posts = JSON.parse(JSON.stringify(data));
      }
    );
  }
  ...

Тогда переменная posts будет отображена в html. Проблема в том, что при использовании подписки мои данные не отображаются в источнике, потому что подписки работают асинхронно. Мне нужно, чтобы данные были извлечены до загрузки страницы.

Если кто-нибудь может указать мне правильное направление, это будет высоко ценится. Благодарю.

Answer 1

Нашел решение. Я ранее использовал HttpClient модуль для обработки вызовов API, оказывается, что мне нужно было использовать Http Модуль со следующим подходом я обнаружил благодаря примеру @IftekharDani.

resolver.service.ts:

import { Http } from '@angular/http';

...

getPosts(): Observable<any> {
    return this.http.get("<your site>/api/posts/all", { })
    .pipe(
      map(
      res => {
        return res.json();
      },
      err => {
        return err;
      }
      )
    );
  }

  resolve (route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    return this.getPosts();
  }

content.component.ts:

...
ngOnInit() {
    this.posts = this.route.snapshot.data['posts'];
}
...

приложение-routing.module.ts

import { ResolverService } from './services/resolver.service';

const routes: Routes = [
  ...
  { path: '**', component: ContentComponent, resolve: { posts: ResolverService}}
];

Answer 2

добавлять ngIf Состояние в HTML может решить вашу проблему.

Пример:

<ul *ngIf="posts">
  <li>Title : {{posts.title}}</li>
</ul>

Ссылка Ссылка: здесь

проверьте файл contacts-detail.component.ts в предоставленной демонстрации для большего понимания.