Javascript 提交表单后不重定向的角度页面导航

我在前端使用Angular，在后端使用nodeJs和NodeEmailr构建了一个联系人表单，在提交表单后，页面必须重定向到应用程序中设置的默认页面。但是，尽管邮件按预期提交，但它不会重定向回联系人页面，只会停留在联系人页面上。看起来，尽管数据在后端按预期传递，但由于某些原因，在订阅方法中没有任何内容作为数据返回。这就是重定向代码没有被执行的原因，经过一段时间后，它会转到错误块，然后导航回默认主页。我怎样才能解决这个问题

触点组件。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 { }

节点后端：

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 { }

客户端路由：

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 { }

---

问题是来自后端，您没有发送响应

更改

节点后端

，如下所示：

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})
    }
});

app.post（'/send/mail'，（req，res）=>{
让用户={
名称：req.body.name，
电子邮件：req.body.email，
电话：req.body.phone，
消息：req.body.message
}
//nodeEmailer设置
var transporter=nodeEmailer.createTransport({
服务：“gmail”，
认证：{
用户：'webbnetdigital@gmail.com',
通行证：“WebNet2015”
}
});
var mailpoptions={
发件人：'webbnetdigital@gmail.com',
致：'tridibc2@gmail.com, shuvankarmallick3@gmail.com',
主题：“新的潜在客户已到达！”，
html:`Name:${user.Name}

电子邮件：${user.Email}

电话：${user.Phone}

消息：${user.Message}
`
};
transporter.sendMail（邮件选项，函数（错误，信息）{
如果（错误）{
console.log（错误）；
res.send（{error}）
}否则{
console.log（'发送的电子邮件：'+信息响应）；
res.send（{message:'Email sent:'+info.response}）
}
});

}))