gpt4 book ai didi

Angular Universal Prerendering with httpClient 用于从/static/data.json 内容中获取数据

转载 作者:太空狗 更新时间:2023-10-29 18:30:06 26 4
gpt4 key购买 nike

我只是想用 Angular Universal 预渲染一个组件,它使用 httpClient 从应用程序本身的 /static 文件夹中获取数据。

  1. 如何在 Angular Universal 中正确使用 httpClient?
  2. 是否可以从项目中访问静态 Assets 并在预呈现时使用 httpClient 获取它们?

我猜该文件不可访问,因为应用程序在预呈现时未在任何服务器上运行。获取路径是相对引用的。稍后在远程服务器上获取文件是可行的,但是“远程服务器”在预渲染期间不可用,或者?如何让它发挥作用?

我收到一个错误 [ERROR],这是由 httpClient.get() 引起的。捕获错误,错误消息为空。

基本上我确实有服务

doReqeust() = {
return this.httpClient.get("./static/get.json")
}

在组件中

onInit() {
this.data = this.myService.doRequest();
}

和通过异步管道绑定(bind)的 View

{{ data.response.title | async }}

static 是项目中的静态文件夹。

最佳答案

您可以访问 Assets 文件夹中的静态文件

注意使用angular universal时,请求URL必须是绝对的。请求 URL 将是进行预呈现的网络服务器之一(例如 http://localhost:4000

Service.ts

import {Inject, Injectable, Optional, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from "@angular/common";
import {HttpClient} from "@angular/common/http";

constructor(private http: HttpClient, @Inject(PLATFORM_ID) private platformId: Object,
@Optional() @Inject('serverUrl') protected serverUrl: string)
{
}


doRequest()
{
let baseUrl = isPlatformBrowser(this.platformId)? '' : this.serverUrl;
return this.http.get(baseUrl + '/assets/static/file.json');

您需要为 serverUrl 提供值。这应该在您的后端完成。假设你使用的是 nodejs

server.ts

 extraProviders: [
//...
{
provide: 'serverUrl',
useValue: `http://localhost:${NODEJS_PORT}`
},

关于Angular Universal Prerendering with httpClient 用于从/static/data.json 内容中获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48327038/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com