Node.js渲染EJS模板时如何兼容Angular 5指令？

我之前也碰到过一模一样的场景，EJS和Angular的模板语法确实容易“打架”，毕竟都用到了类似的符号体系。下面几个方案亲测可行，你可以根据自己的业务场景挑选：

1. 转义EJS解析逻辑，直接输出Angular指令 #

EJS默认会解析<% %>、<%= %>这类标签，如果你要输出Angular的指令（比如*ngIf、[(ngModel)]）或者插值表达式{{ }}，可以用EJS的不转义输出标签<%- %>来包裹Angular代码——这样EJS就会跳过内部内容的解析，原封不动把代码输出给浏览器，Angular就能正常识别执行了。

举个简单的例子：

<!-- EJS模板文件 -->
<div class="page-header">
  <!-- EJS负责渲染的静态标题 -->
  <h1><%= pageTitle %></h1>
  
  <!-- 用<%- %>输出Angular指令，EJS不会解析内部内容 -->
  <%- '<p *ngIf="showWelcomeMsg">欢迎访问Angular交互区域</p>' %>
  
  <!-- 输出带双向绑定的Angular输入框，注意引号转义 -->
  <%- '<input [(ngModel)]="userInput" placeholder="请输入内容">' %>
</div>

如果是多行Angular代码，也可以配合模板字符串使用（注意转义内部的引号）：

<%- `
  <div *ngFor="let item of productList" class="product-card">
    <h3>{{ item.name }}</h3>
    <p>价格：{{ item.price }}元</p>
    <button (click)="addToCart(item)">加入购物车</button>
  </div>
` %>

2. 修改EJS默认分隔符，彻底避免语法冲突 #

要是觉得转义写法太繁琐，你可以直接修改EJS的默认分隔符，让它和Angular的语法完全错开。比如把EJS的分隔符从<% %>改成[[ ]]，这样Angular的{{ }}和各类指令就能毫无阻碍地写在EJS模板里了。

服务端配置（Node.js环境）： #

const ejs = require('ejs');
// 把EJS的分隔符改成[[ 和 ]]
ejs.delimiter = '[';
ejs.openDelimiter = '[';
ejs.closeDelimiter = ']';

// 或者在渲染时临时指定分隔符
app.render('home', {
  pageTitle: '首页',
  delimiter: '[' // 对应模板中的[[ ]]
}, (err, html) => {
  // 处理渲染后的HTML内容
});

修改后的EJS模板： #

<!-- EJS用[[ ]]渲染数据 -->
<h1>[[ pageTitle ]]</h1>

<!-- Angular的指令和插值完全正常书写，没有任何冲突 -->
<div *ngIf="isUserLoggedIn">
  <p>欢迎回来，{{ currentUser.nickname }}！</p>
  <button (click)="handleLogout()">退出登录</button>
</div>

3. 分离渲染职责，EJS仅做初始数据注入 #

另一种更清晰的思路是：让EJS只负责渲染页面的静态结构和初始数据，所有动态交互逻辑完全交给Angular处理。你可以用EJS把初始数据输出到全局变量中，再让Angular组件读取这个变量完成初始化。

EJS模板示例： #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title><%= pageTitle %></title>
  <!-- 引入Angular的编译脚本 -->
</head>
<body>
  <!-- Angular的根组件占位符 -->
  <app-root></app-root>

  <!-- 用EJS把初始数据注入到全局window对象 -->
  <script>
    window.initialAppData = <%= JSON.stringify(initialData) %>;
  </script>
</body>
</html>

Angular组件读取初始数据： #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  appData: any;

  ngOnInit() {
    // 读取EJS注入的全局初始数据
    this.appData = window['initialAppData'];
    // 后续用Angular处理所有动态交互逻辑
  }
}

这种方式的好处是彻底分离了服务端渲染（EJS）和前端框架（Angular）的职责，既避免了语法冲突，也更符合现代前后端分离的开发思路。

内容的提问来源于stack exchange，提问作者cop