1

好的，我最近在我的 Angular6 应用程序中实现了 SSR，旨在以可抓取的方式呈现动态 HTML。一切似乎都运行良好，但我的问题是从 API 端点呈现数据。

一旦用户到达我的站点，就会显示从 Node 服务器检索到的热门帖子列表。为了在页面加载之前检索数据，我为我的帖子服务实现了一个解析器。解析器将解析一个 Observable，然后我的组件将访问它。

解析器.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中。问题是，使用订阅时，我的数据不会在源中呈现，因为订阅是异步工作的。我需要在页面加载之前提取数据。

如果有人能指出我正确的方向，将不胜感激。谢谢。

4

2 回答 2

0

添加ngIf条件HTML可能会解决您的问题。

示例：

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

参考链接：这里

检查contacts-detail.component.ts提供的演示中的文件以获得更多理解。

于 2018-12-05T10:42:13.547 回答
0

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

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

应用程序路由.module.ts

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

const routes: Routes = [
  ...
  { path: '**', component: ContentComponent, resolve: { posts: ResolverService}}
];
于 2018-12-05T19:10:12.080 回答