angular - 如何将变量从 Express.js 传递到 Angular11 通用 SSR
问题描述
快速提问,我们如何从 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
当页面加载或重新加载到视图源中而不是在 shadow dom 或 DOM 中或在 chrome 上“检查”时,我们需要显示来自 expressjs 的消息。必须位于呈现 HTML 源文件的视图源上。
我们将 Angular 11 SSR 通用与 expressjs 一起使用。
有什么想法还是不可能?
解决方案
您可以从服务器提供值并在您的组件/服务中使用它们
服务器.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 中(您可以使用查看源代码查看)。
由于传输状态,消息也可以在客户端使用
编辑我添加了说明,以便消息在客户端仍然可用
推荐阅读
- android - 想要增加字符串中 unicode 代理对符号的大小,例如数学 i 符号
- python - Alternative to writing 15 if else statements in python
- reactjs - Nginx 背后的 React 应用开发
- java - 无法阻止 BufferReader 在控制台中接受输入
- docker - 带有 Elixir CircleCI 配置的纱线:找不到 package.json 文件
- c# - 如何在 .NET Core 中裁剪图像?
- python - “TypeError:join() 参数必须是 str 或 bytes,而不是 'NoneType'”,使用 Magpie+Tensorflow/Python3
- python - 两台电脑之间通过 ssh 传输文件
- c# - C# 列表集合在方法之外失去其价值
- arrays - 从 Select-String 中取出每一行的最后一个单词