Angular 14特定条件下自动告警邮件实现求助

你的两种方法失效原因 #

• 方法一：大概率是用了EmailJS类服务但参数配置错误（比如SecureToken无效），或是浏览器安全策略拦截了前端邮件请求，而且前端直接触发邮件容易被标记为垃圾邮件，还存在密钥暴露的风险。
• 方法二：Nodemailer是Node.js后端依赖，Angular是前端框架，浏览器环境不支持Node.js核心模块，所以直接在Angular组件中运行这段代码必然报错。

可行方案 #

方案一：后端API+Angular前端调用（推荐，安全可靠） #

通过Node.js后端实现邮件发送逻辑，Angular前端在状态值超限后调用后端接口触发邮件。

1. 后端实现（Node.js + Express + Nodemailer）

// server.js
const express = require('express');
const nodemailer = require('nodemailer');
const cors = require('cors');
const app = express();

// 允许跨域请求，适配Angular前端
app.use(cors());
app.use(express.json());

// 配置邮件传输器（以Gmail为例，需开启应用专用密码）
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: '你的邮箱@gmail.com',
    pass: '你的谷歌应用专用密码' // 注意：不要用原邮箱密码，需在谷歌账号设置中生成应用专用密码
  }
});

// 邮件发送接口
app.post('/send-alert-email', (req, res) => {
  const { to, subject, body } = req.body;
  const mailOptions = {
    from: '你的邮箱@gmail.com',
    to: to,
    subject: subject,
    text: body
  };

  transporter.sendMail(mailOptions, (err, info) => {
    if (err) {
      console.error(err);
      res.status(500).json({ success: false, msg: '邮件发送失败' });
    } else {
      res.status(200).json({ success: true, msg: '邮件发送成功' });
    }
  });
});

// 启动服务
app.listen(3000, () => {
  console.log('后端服务运行在 http://localhost:3000');
});

安装依赖：

npm install express nodemailer cors --save

2. Angular前端实现

在组件中监听状态值，超过79时调用后端接口：

// status-monitor.component.ts
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-status-monitor',
  templateUrl: './status-monitor.component.html'
})
export class StatusMonitorComponent {
  currentStatus: number = 0;

  constructor(private http: HttpClient) {}

  // 假设这是状态值更新后的检查逻辑
  checkStatusThreshold() {
    if (this.currentStatus > 79) {
      this.http.post('http://localhost:3000/send-alert-email', {
        to: '告警接收邮箱@example.com',
        subject: '系统告警：即将锁定',
        body: `当前状态值为${this.currentStatus}，已超过阈值79，系统即将锁定，请及时处理。`
      }).subscribe({
        next: () => console.log('告警邮件已触发发送'),
        error: (err) => console.error('邮件发送请求失败', err)
      });
    }
  }
}

别忘了在app.module.ts中导入HttpClientModule：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...其他模块
    HttpClientModule
  ]
})
export class AppModule { }

方案二：使用EmailJS前端服务（快速实现，适合小型项目） #

如果不想搭建后端，可以用EmailJS提供的前端邮件服务，步骤如下：

1. 注册EmailJS账号，创建邮箱服务和邮件模板，获取Service ID、Template ID、Public Key。
2. 安装EmailJS依赖：

npm install @emailjs/browser --save

3. 组件中实现发送逻辑：

// status-monitor.component.ts
import { Component } from '@angular/core';
import emailjs from '@emailjs/browser';

@Component({
  selector: 'app-status-monitor',
  templateUrl: './status-monitor.component.html'
})
export class StatusMonitorComponent {
  currentStatus: number = 0;

  sendAlertEmail() {
    if (this.currentStatus > 79) {
      const templateParams = {
        to_email: '告警接收邮箱@example.com',
        subject: '系统告警：即将锁定',
        message: `当前状态值为${this.currentStatus}，已超过阈值79，系统即将锁定，请及时处理。`
      };

      // 替换为你自己的Service ID、Template ID、Public Key
      emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams, 'YOUR_PUBLIC_KEY')
        .then(() => console.log('邮件发送成功'))
        .catch(err => console.error('邮件发送失败', err));
    }
  }
}

注意事项 #

• 后端方案中，邮箱服务商（如Gmail）可能需要开启SMTP服务或应用专用密码，否则会触发安全拦截。
• EmailJS方案中，不要将Public Key暴露在公开代码仓库中，可通过环境变量配置。

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