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

Question

快速提问，我们如何从 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 通用。

有什么想法还是不可能？

Answer 1

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

服务器.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 中（您可以使用查看源代码查看）。

由于传输状态，消息也可用客户端

编辑我添加了说明，以便消息在客户端仍然可用