Angular 4电子邮件联系表格

大家 .

我是Angular的新手，我们的任务是完成一个“联系我们”表单，允许客户通过网络表单发送电子邮件 .

HTML：

<div class="content-section">
    <div class="container">
        <div class="row">
            <div class="">
                <h2 class="intro-title">Contact Us</h2>
                <form class="well form-horizontal" action=" " method="post" id="contact_form">
                    <div class="col-lg-6 spacer">
                        <div class="fadeIn-1">
                            <p>
                                <strong>Contact us</strong>
                                

                                111.222.3333
                                

                                <a href="mailto:information@mysite.com">information@mysite.com</a>
                            </p>
                        </div>
                        

                        <div class="fadeIn-2">
                            <p>
                                <strong>Office 1</strong>
                                

                                Our street address
                                

                                City, state, zip
                            </p>
                        </div>
                        

                        <div class="fadeIn-3">
                            <p>
                                <strong>Office 2</strong>
                                

                                street address
                                

                                City, state, zip
                            </p>
                        </div>
                    </div>
                    <fieldset>

                        <!-- Form Name -->
                        <legend>Send us a message</legend>

                        <!-- Text input-->

                        <div class="form-group">
                            <!--<label class="col-md-4 control-label">First Name</label>-->
                            <div class="col-md-6 inputGroupContainer">
                                <div class="input-group animated-delay-1">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                    <input
                                        name="name"
                                        placeholder="Name"
                                        class="form-control"
                                        type="text">
                                </div>
                            </div>
                        </div>

                        <!-- Text input-->
                        <div class="form-group">
                            <!--<label class="col-md-4 control-label">E-Mail</label>-->
                            <div class="col-md-6 inputGroupContainer">
                                <div class="input-group animated-delay-2">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                                    <input
                                        name="email"
                                        placeholder="E-Mail Address"
                                        class="form-control"
                                        type="text">
                                </div>
                            </div>
                        </div>


                        <!-- Text input-->

                        <div class="form-group">
                            <!--<label class="col-md-4 control-label">Phone #</label>-->
                            <div class="col-md-6 inputGroupContainer">
                                <div class="input-group animated-delay-3">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                                    <input
                                        name="phone"
                                        placeholder="(801)222-3333"
                                        class="form-control"
                                        type="text">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <!--<label class="col-md-4 control-label">Subject</label>-->
                            <div class="col-md-6 inputGroupContainer">
                                <div class="input-group animated-delay-4">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-bookmark"></i></span>
                                    <input
                                        name="subject"
                                        placeholder="Subject"
                                        class="form-control"
                                        type="text">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <!--<label class="col-md-4 control-label">Message</label>-->
                            <div class="col-md-6 inputGroupContainer">
                                <div class="input-group animated-delay-5">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                                    <textarea
                                        rows="9"
                                        class="form-control"
                                        name="comment"
                                        placeholder="Message">
                                    </textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Button -->
                        <div class="form-group">
                            <div class="col-md-4">
                                <button
                                    type="submit"
                                    class="btn btn-primary">Send 
                                    <span class="glyphicon glyphicon-send"></span>
                                </button>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>

这是组件：

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { slideInOutAnimation, fadeInAnimation } from '../_animations/index';

@Component({
    selector: 'contact-page',
    templateUrl: './contact.component.html',
    styleUrls: ['./contact.component.css'],
    animations: [slideInOutAnimation, fadeInAnimation, trigger('slideInOut', [
        state('in', style({
            transform: 'translate3d(0, 0, 0)'
        })),
        state('out', style({
            transform: 'translate3d(100%, 0, 0)'
        })),
        transition('in => out', animate('400ms ease-in-out')),
        transition('out => in', animate('400ms ease-in-out'))
    ]),
],
    host: {
        '(window:scroll)': 'updateHeader($event)',
        '[@slideInOutAnimation]': '',
        '[@fadeInAnimation]': ''
    }
})
export class ContactComponent {
    title = 'app';
    isScrolled = false;
    currPos: Number = 0;
    startPos: Number = 0;
    changePos: Number = 0;

    menuState = 'out';

    constructor() { }

    updateHeader(evt) {
        this.currPos = (window.pageYOffset || evt.target.scrollTop) - (evt.target.clientTop || 0);
        if (this.currPos >= this.changePos) {
            this.isScrolled = true;
        } else {
            this.isScrolled = false;
        }
    }
}

我看过像“nodemailer”这样的选项，我似乎无法弄清楚它是如何工作的 .

当客户点击提交按钮时，我需要将电子邮件发送到我们的电子邮件地址 . 有什么建议？

此外，我不确定还需要什么来获得帮助，所以如果你还需要其他任何东西，我很乐意发布它 .