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

Question

有一个问题，我们如何在angular-universal中传递HTML组件或从expressjs向主应用程序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的“inspect”中显示。必须在渲染HTML源文件的视图源中显示。

我们正在使用带有expressjs的Angular 11 SSR Universal。

有任何想法或者这是不可能的吗？

- jcdsr

Answer 1

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

app.get('*', (req, res) => {
      res.render('index', { req, res,  providers: [{ provide: 'message', useValue: 'This is your message' }] })

component.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);
    }
    
    
    

component.html

<div *ngIf="message">Message from server : {{message}} </div>

使用此代码，您的消息将出现在服务器呈现的html中（您可以使用查看源代码查看）。

由于转移状态，该消息也可用于客户端。

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

- David

---

然后您可以将其添加到传输状态中。 - David

@jcdsr 我添加了额外的说明，因为你显然卡住了。 - David

其实，我之前卡住了，谢谢。变量const storeKey是makeStateKey而不是makeCacheKey吗？ - jcdsr

同时我遇到了以下问题： 错误：src/app/app.component.html:23:13 - 错误 TS2445：属性'message'受保护，只能在类“AppComponent”及其子类中访问。 - jcdsr

@jcdsr 我修复了代码（使用makeStateKey修正了public信息）。 - David