表單提交后，角度頁面導航不重定向

Question

我在前端使用 Angular 和后端使用 nodeJs 和 nodemailer 構建了一個聯系表單，在提交表單后，頁面必須重定向到應用程序中設置的默認頁面。 但是，它不會重定向回並僅停留在聯系頁面上，盡管郵件按預期提交。 似乎雖然數據在后端按預期傳遞，但由於某種原因，在 angular 中沒有任何東西作為 subscribe 方法中的數據返回。 這就是為什么重定向代碼沒有被執行，一段時間后它轉向錯誤塊，然后導航回默認主頁。 我怎樣才能解決這個問題？？？

聯系component.ts：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { ToastrManager } from 'ng6-toastr-notifications';
@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  contactForm: FormGroup;
  public formName: string;
  public formEmail: string;
  public formPhone: number;
  public formMessage: string;

  constructor(private router: Router, private _http:HttpClient, 
    private formBuilder: FormBuilder, private toastr: ToastrManager) { }

  ngOnInit() {
    this.contactForm = this.formBuilder.group({
      formName: ['', Validators.required],
      formEmail: ['', Validators.required],
      formPhone: ['', Validators.required],
      formMessage: ['']
    })}

  public contact() {
  let param =  {
    'name': this.contactForm.get('formName').value,
    'email': this.contactForm.get('formEmail').value,
    'phone': this.contactForm.get('formPhone').value,
    'message': this.contactForm.get('formMessage').value,
 }
  this._http.post('http://localhost:4000/api/v1/blogs' + '/send/mail', param ).subscribe(
    data => {
      console.log(data)    //nothing is coming in data although mail is getting sent
      this.toastr.successToastr('Your contact information is saved Susseccfully!', 'Success!');
        setTimeout(() =>{
          this.router.navigate(['/']);
        }, 1000)
    },
    error => {                      //navigating to this error block after sometime
      console.log(error);
      console.log(error.errorMessage);
      this.toastr.errorToastr('This is not good!', 'Oops!');
      this.router.navigate(['/']);
    })}}

節點后端：

app.post('http://localhost:4000'+'/send/mail', (req, res) => {   
    let user = {
                name: req.body.name,
                email: req.body.email,
                phone: req.body.phone,
                message: req.body.message
    }
    //nodemailer setup
var transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: 'mailid',
      pass: 'passkey'
    }
  });
  var mailOptions = {
    from: 'mailid',
    to: 'mailid',
    subject: 'A contact has Arrived!',
    html: `<p>Name: ${user.name}</p>
           <p>Email: ${user.email}</p>
           <p>Phone: ${user.phone}</p>
           <p>Message: ${user.message}</p>`};

  transporter.sendMail(mailOptions, function(error, info){
    if (error) {
      console.log(error);
    } else {
      console.log('Email sent: ' + info.response);
    }
  });
  console.log(req.body)
});

應用路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './client/home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';


const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'home', component: HomeComponent},
  {path: '**', component: PageNotFoundComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

客戶端路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BlogHomeComponent } from '../blog-home/blog-home.component';
import { BlogDetailComponent } from '../blog-detail/blog-detail.component';
import { BlogByCategoryComponent } from '../blog-by-category/blog-by-category.component';
import { ContactComponent } from '../contact/contact.component';
const routes: Routes = [
  {path: 'blogs', component: BlogHomeComponent},
  {path: 'blog/:blogId', component: BlogDetailComponent},
  {path: 'bycategory/:categoryId', component: BlogByCategoryComponent},
  {path: 'contact', component: ContactComponent}];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ClientRoutingModule { }

Answer 1

問題出在您的后端，您沒有發送響應。

像這樣更改您的node backend ：

app.post('/send/mail', (req, res) => {
let user = {
    name: req.body.name,
    email: req.body.email,
    phone: req.body.phone,
    message: req.body.message
}
//nodemailer setup
var transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: 'webbnetdigital@gmail.com',
        pass: 'webbnet2015'
    }
});
var mailOptions = {
    from: 'webbnetdigital@gmail.com',
    to: 'tridibc2@gmail.com, shuvankarmallick3@gmail.com',
    subject: 'A new lead has Arrived!',
    html: `<p>Name: ${user.name}</p>
       <p>Email: ${user.email}</p>
       <p>Phone: ${user.phone}</p>
       <p>Message: ${user.message}</p>`
};

transporter.sendMail(mailOptions, function (error, info) {
    if (error) {
        console.log(error);
        res.send({error})
    } else {
        console.log('Email sent: ' + info.response);
        res.send({message: 'Email sent: ' + info.response})
    }
});

});