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

Question

快速问题，我们如何可以传递到角通用的HTML组件或主要应用程序index.html变量从高速公路，从高速公路到ejs或帕格？

        app.get('*', (req, res) => {
          res.render('index', { req, messsage: 'This is your message' });
        }

Ejs可以从如下的快速代码中获得变量：

    <h1><%= message %></h1>

Pug可以从如下的高速公路中获得变量：

 h1= message

当页面加载或重新加载到视图源中时，我们需要显示来自高速公路的消息，而不是在阴影区域或dom中，或者在chrome上作为“检查”。必须位于呈现HTML源文件中的视图源上。

我们使用角11 SSR通用与高速公路。

有什么想法或者是不可能的？

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中(您可以使用视图源看到它)。

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

编辑i添加了说明，以便消息仍然可用