如何移动到另一个页面onclick并仍然保持SPA的原则

Question

在Angular项目中，我定义了主要组件来显示表中公司的数据。

在表格下方，单击按钮时的按钮将移动到包含输入的页面以添加新公司。填写完字段后，单击“提交”，新公司将添加到数据库中。

问题：保持在同一页面上，不要看新公司是否已添加到数据库中。如何在保持SPA原则的同时将用户移回主要组件？

public addCompany(newCompanyName:String, newCompanyPassword:String, newCompanyEmail:String ){
    let newP:any ={
      "name": newCompanyName,
      "password": newCompanyPassword,
      "email": newCompanyEmail,
      "coupons": []
      }

     this.myHttpClient.post<any>("http://localhost:8080/CouponSystemJersey/couponsystem/admin/insertCompany", newP).subscribe(
       (res)=>{
         console.log("new company");
         // How to redirect to adminComponent ?
        },
       (err)=>{console.log(err)}
     ); 
  }

我使用角度路线：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { AdminComponent } from './admin/admin.component';
import { AddCompanyComponent } from './add-company/add-company.component';

const routes: Routes = [
{path:"login", component:LoginComponent},
{path:"admin", component:AdminComponent},
{path:"addCompany", component:AddCompanyComponent}];

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

想要从addCompany切换到addCompany。

按下按钮后，addCompany函数不会被激活，但会激活另一个函数（在addCmpany的TS中找到）并运行addCompany（在检查字段不为空之后）

错误信息：

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8080/CouponSystemJersey/couponsystem/admin/insertCompany", ok: false, …}
error: {error: SyntaxError: Unexpected token A in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: "A new customer was inserted"}
headers: HttpHeaders
lazyInit: ƒ ()
lazyUpdate: null
normalizedNames: Map(0) {}
__proto__: Object
message: "Http failure during parsing for http://localhost:8080/CouponSystemJersey/couponsystem/admin/insertCompany"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost:8080/CouponSystemJersey/couponsystem/admin/insertCompany"
__proto__: HttpResponseBase

Answer 1

你可以使用这种方法this.router.navigate(["/anotherComponent"])。

进口

import { Router } from "@angular/router";

然后

constructor(private router: Router) {}

public addCompany(newCompanyName:String, newCompanyPassword:String, newCompanyEmail:String ){
    let newP:any ={
      "name": newCompanyName,
      "password": newCompanyPassword,
      "email": newCompanyEmail,
      "coupons": []
      }

     this.myHttpClient.post<any>("http://localhost:8080/CouponSystemJersey/couponsystem/admin/insertCompany", newP).subscribe(
       (res)=>{
         console.log("new company");
         this.router.navigate(["/admin"]);
        },
       (err)=>{console.log(err)}
     ); 
  }

Answer 2

您收到错误是因为您的请求对象不符合您的数据库预期，请尝试：

....
this.myHttpClient.post<any>("http://localhost:8080/CouponSystemJersey/couponsystem/admin/insertCompany", JSON.stringify(newP)).subscribe(
.....

然后当你得到正确的答案：

 (res)=>{
     console.log("new company");
     this.router.navigate(["/admin"]);
    }

我建议你进行原子测试，尝试导航到其他页面而不提出请求。