Angular6同步加载路线数据

Question

好的，我最近在Angular6应用程序中实现了SSR，旨在以可爬网的方式呈现动态HTML。 似乎一切正常，但我的问题是从API端点渲染数据。

用户到达我的网站后，将立即显示从Node服务器检索到的热门帖子列表。 为了在页面加载之前检索数据，我为我的posts服务实现了一个解析器。 解析器将解析一个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

在HTML添加ngIf条件可以解决您的问题。

范例 ：

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

引用链接： 此处

在提供的演示中检查文件contacts-detail.component.ts ，以了解更多信息。

Answer 2

找到了解决方案。 我以前使用HttpClient模块来处理api调用，事实证明，由于@IftekharDani的示例，我需要使用以下发现的方法来使用Http模块。

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