如何在Angular中使用Node创建的对象，且规避Handlebars与window全局变量

嘿，我来帮你搞定这个需求！你想在Angular应用里获取Node端生成的对象，同时避开Handlebars这类模板引擎和window全局变量，最贴合Angular最佳实践的方案是通过HTTP API请求来实现——这种方式前后端职责清晰，完全不需要依赖模板引擎或全局变量，下面是具体的代码示例：

Node端（server.js） #

首先修正你原代码里的小错误（Express中应该用响应对象res而非app来发送数据），我们可以搭建一个简单的API接口来返回目标对象，同时托管Angular的静态文件：

const express = require('express');
const app = express();
const path = require('path');

// 托管Angular打包后的静态资源（替换成你的Angular项目打包路径）
app.use(express.static(path.join(__dirname, 'dist/your-angular-app')));

// 定义API接口，返回你需要的对象
app.get('/api/foobar', (req, res) => {
  const foo = { name: 'hello' };
  res.json(foo); // 以JSON格式返回数据
});

// 处理Angular SPA的路由跳转，所有非API请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-angular-app/index.html'));
});

// 启动服务
app.listen(3000, () => console.log('Server running on http://localhost:3000'));

Angular端（my.service.ts） #

在Angular中，我们使用官方的HttpClient服务来发起请求，这是Angular推荐的网络请求方式，类型安全且易于维护：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

// 可以定义一个接口来约束数据类型，增强类型安全
interface Foobar {
  name: string;
}

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor(private http: HttpClient) { }

  // 封装获取数据的方法
  getFoobar(): Observable<Foobar> {
    return this.http.get<Foobar>('/api/foobar');
  }
}

在Angular组件中使用服务 #

最后，在你的组件中注入这个服务，订阅数据即可：

import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private myService: MyService) {}

  ngOnInit(): void {
    this.myService.getFoobar().subscribe(foobar => {
      console.log(foobar); // 控制台会输出 {name: 'hello'}
    });
  }
}

方案优势 #

• 完全不需要依赖Handlebars等模板引擎，也不会在window上挂载全局变量，符合现代前端开发的规范
• 前后端分离清晰，数据传递通过标准HTTP接口实现，易于调试和维护
• 支持类型校验，Angular中可以通过接口定义来约束返回数据的结构，减少类型错误

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