时间戳

首页 > 解决方案 > 在 ssr 构建中使用 ngOnInit 中的拦截器 - Angular 8

angular - 在 ssr 构建中使用 ngOnInit 中的拦截器 - Angular 8

问题描述

我正在使用拦截器来添加 api 标头。我在 ngOnInit 函数中调用了一些 api。对于正常的 ng 服务，它运行良好。但是在 ssr 构建和服务中，没有调用 api 并且页面没有呈现但显示正在加载。如果我在 ngOnInit 中评论了 api 调用，它就可以工作。我怎么解决这个问题？？请帮忙。

我的 component.ts 函数

ngOnInit() {
    this.authController.fetchUser
      .subscribe(
        (params) => {
          this.id = +params['id'];
          this.user = this.authController.getUser(this.id)
        }
      );
  }

fetchUser() 是一个使用拦截器的 api 调用函数。此功能在 ssr 构建中不起作用。

标签： angularinterceptorangular8angular-universal

解决方案

根据这种情况，您似乎在 SSR 代码中使用了与客户端相关的内容，这就是您的 API 没有被调用并继续加载的原因。

在使用 SSR 时，保持 platformBrowser 检查代码始终是一种好方法，只需更改如下代码 -

 constructor(private router: Router) { }

 ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.fetchData();
    }
  }

  fetchData() {
    this.authController.fetchUser
      .subscribe((params) => {
        this.id = +params['id'];
        this.user = this.authController.getUser(this.id)
      });
  }

推荐阅读