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

Question

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

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

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

Эта Наблюдаемая будет правильно разрешена иможно получить доступ в моем компоненте следующим образом:

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'];
}
...

app-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 в предоставленной демоверсии для большего понимания.