gpt4 book ai didi

angular - 如何将变量从 Express.js 传递到 Angular11 通用 SSR

转载 作者:行者123 更新时间:2023-12-04 16:25:15 26 4
gpt4 key购买 nike

快速提问,我们如何从 expressjs 传递到 angular-universal HTML 组件或主应用程序 index.html 变量,例如从 expressjs 到 ejs 或 pug 可用?

        app.get('*', (req, res) => {
res.render('index', { req, messsage: 'This is your message' });
}
Ejs 可以像这样从 expressjs 获取变量:
    <h1><%= message %></h1>
Pug 可以像这样从 expressjs 获取变量:
 h1= message
当页面加载或重新加载到 时,我们需要显示来自 expressjs 的消息。查看源不在 shadow dom 或 DOM 中,也不在 chrome 上作为“检查”。必须在 查看源在渲染 HTML 源文件中。
我们使用带有 expressjs 的 angular 11 SSR 通用。
有什么想法还是不可能?

最佳答案

您可以从服务器提供值并在您的组件/服务中使用它们
server.ts

app.get('*', (req, res) => {
res.render('index', { req, res, providers: [{ provide: 'message', useValue: 'This is your message' }] })
组件.ts
import {Injectable, Inject, PLATFORM_ID, Optional} from '@angular/core';
import {isPlatformBrowser} from "@angular/common";
import {TransferState, makeStateKey} from '@angular/platform-browser';

//Message here is optional because it is only provided in SSR mode

constructor(@Inject(PLATFORM_ID) private platformId: Object,
@Optional() @Inject('message') public message: string,
private readonly transferState: TransferState)
{
const storeKey = makeStateKey<string>('messageKey');
if(isPlatformBrowser(this.platformId))//get message from transferState if browser side
{
this.message = this.transferState.get(storeKey, 'defaultMessageValue');
}
else //server side: get provided message and store in in transfer state
{
this.transferState.set(storeKey, this.message);
}



组件.html
<div *ngIf="message">Message from server : {{message}} </div>
使用该代码,您的消息将出现在服务器呈现的 html 中(您可以使用查看源代码查看)。
由于传输状态,消息也可用客户端
编辑 我添加了说明,以便消息在客户端仍然可用

关于angular - 如何将变量从 Express.js 传递到 Angular11 通用 SSR,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66014870/

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