Как перейти на другую страницу по клику и при этом сохранить принцип SPA - PullRequest
Новая
       22

Как перейти на другую страницу по клику и при этом сохранить принцип SPA

0 голосов
/ 08 апреля 2019

В Angular Project я определил основной компонент для отображения данных о компаниях в таблице.

Под таблицей кнопка при нажатии кнопки перемещается на страницу с входами для добавления новой компании.,После заполнения полей нажмите «Отправить» и новая компания будет добавлена ​​в БД.

Проблема: Оставайтесь на той же странице и не смотрите, была ли новая компания добавлена ​​в БД.Как переместить пользователя обратно к основному компоненту, сохраняя принцип 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 на Admin с addCompany.

Функция addCompany не активируется при нажатии кнопки, но активируется другая функция (находится в TS addCmpany) и запускает 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

Ответы [ 2 ]

0 голосов
/ 08 апреля 2019

Вы получаете сообщение об ошибке, поскольку ваш объект запроса не соответствует ожидаемому для вашей БД, попробуйте: 

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

Тогда, когда вы получите правильный ответ: 

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

Я предлагаю вам сделать атомный тест, попробуйте перейти на другую страницу без запроса.

0 голосов
/ 08 апреля 2019

Вы можете использовать этот подход 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)}
     ); 
  }
...