Блог

Допустим, у меня есть простой угловой компонент:

 @Component({
  selector: 'app-email-content',
  template: '<h1>Welcome {{username}}!</h1>'
})
export class WelcomeEmailComponent {
  @Input() username: string
}
  

Моя цель — взять этот угловой компонент и отобразить его в обычный HTML с помощью Node.Js, для отправки настраиваемых электронных писем.

Я знаю, что рендеринг на стороне сервера определенно возможен с Angular Universal. Но я не уверен, как явно отобразить один конкретный компонент.

Подход заключается в отправке динамически генерируемых шаблонов на основе компонентов Angular на электронную почту пользователей из проекта Angular SSR.

Найдите пример репозитория внизу этого ответа.

Шаги, которые вам нужно выполнить;

1. Создайте свои шаблоны в отдельном пути маршрутизации, который предназначен для отображения только шаблонов электронной почты, а не ваших панелей навигации, глобального CSS и т. Д.

Пример:

welcome-email-component.component.ts

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

@Component({
  selector: 'app-welcome-email-component',
  templateUrl: './welcome-email-component.component.html',
  styleUrls: ['./welcome-email-component.component.css']
})
export class WelcomeEmailComponentComponent implements OnInit {

  username: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.username = params.username;
    });
  }

}
  

welcome-email-component.component.html

 <style>
    .title-p {
        color: #00025a;
        font-size: 20px;
        font-weight: bold;
    }
</style>

<p class="title-p">Welcome {{username}}</p>
  

Вам необходимо указать маршрут для этого компонента, как показано ниже, поэтому, когда пользователь переходит к welcome-email/username маршруту, он должен показывать только компонент, созданный шаблоном электронной почты.

 { path: 'welcome-email/:username', component: WelcomeEmailComponentComponent }
  

2. Внедрите Angular SSR в свой проект из замечательных рекомендаций Angular SSR, рендеринг на стороне сервера (SSR) с Angular Universal.

Это всего лишь две строки кода.

 ng add @nguniversal/express-engine
npm run dev:ssr
  

3. Наконец, создайте серверный API для генерации шаблона из вашего компонента Angular и отправки электронных писем или предоставьте HTML-код отдельного компонента, добавьте функцию API в свой server.ts , как показано ниже.

server.ts

 server.get('/api/send-email/:username', (req, res) => {
    // Below is the URL route for the Angular welcome mail component
    request(`http://127.0.0.1:4200/welcome-email/${req.params.username}`, (error, response, body) => {
        // TODO : Send email to the user from WelcomeEmailComponentComponent.ts component as `body`
        // use the body to send email
        res.send('Email sent');
    });
});
  

Пример кода: https://github.com/aslamanver/angular-send-component-email

Демонстрация динамически сгенерированного компонента в этом репозитории;

Наконец, когда вы получите доступ /api/send-email/:username , это сгенерирует компонент welcome mail и предоставит его текст HTML, после чего вы можете продолжить работу с функцией отправки электронной почты.

Я хлопаю ответом @ Googlian. Но angular создает слишком много незнакомых функций, специфичных для HTML5, CSS3 и angular, поэтому после этого вам нужно удалять их один за другим, если вам нужен действительно действительный контент электронной почты, иначе ваша электронная почта, скорее всего, будет рассматриваться как спам, отправленный почтовыми клиентами.

Я предполагаю, что у вас может быть компонент со стандартами xHTML без CSS3, без экспериментальных функций HTML5, и создайте шаблон электронной почты с this помощью and ElementRef , а затем проанализируйте обязательные поля вручную.

Отправьте строку на сервер, nodejs, затем отправьте ее по электронной почте. Вы можете использовать nodemailer