Angular 7 - Синглтон Сервис не работает - PullRequest
Новая
       12

Angular 7 - Синглтон Сервис не работает

0 голосов
/ 02 мая 2019

У меня есть услуга: 

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Order} from './interfaces/Order';
import {OrderResponse} from './interfaces/OrderResponse';
import {AuthorizeRequest} from './interfaces/AuthorizeRequest';
import {Observable, Subject} from 'rxjs';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

@Injectable({
  providedIn: 'root'
})
export class OrderService {

  orderId = 0;
  price = 0;

  constructor(private http: HttpClient) {}

  saveOrder(id: number, price: number){
    this.orderId = id;
    this.price = price;
  }

  getOrderId(){
    return this.orderId;
  }

  getPrice(){
    return this.price;
  }

  public addOrder(newOrder: Order): Observable<OrderResponse>{
    return this.http.post<OrderResponse>('http://localhost:8080/order/add', newOrder, httpOptions)
  }
}

Я сохраняю данные из бэкэнда в одном компоненте: 

import { Component, OnInit } from '@angular/core';
import {Order} from '../interfaces/Order';
import {OrderService} from '../order.service';
import {OrderResponse} from '../interfaces/OrderResponse';

@Component({
  selector: 'app-orderpage',
  templateUrl: './orderpage.component.html',
  styleUrls: ['./orderpage.component.css']
})
export class OrderpageComponent implements OnInit {
  order: Order;
  orderResponse: OrderResponse;

  constructor(private orderService: OrderService) { }

  ngOnInit() {
    this.order = {
      dateOfService: '',
      city: '',
      address: '',
      apartmentSize: 0,
      phoneNumber: '',
      status: "ORDERED",
      client: null
    };
  }

  public addOrder(){
    this.orderService.addOrder(this.order).subscribe(response => {
        this.orderService.saveOrder(response.orderId, response.price);
    });
  }
}

И я хотел бы прочитать фактические значения orderId и цены в другом компоненте: 

import { Component, OnInit } from '@angular/core';
import {OrderService} from '../order.service';

@Component({
  selector: 'app-ordersummary',
  templateUrl: './ordersummary.component.html',
  styleUrls: ['./ordersummary.component.css']
})

export class OrdersummaryComponent implements OnInit {
  orderId: number;
  price: number;

  constructor(private orderService: OrderService) { }

  ngOnInit() {
    this.orderId = this.orderService.getOrderId();
    this.price = this.orderService.getPrice();
  }
}

Но второй компонент всегда показывает значение 0 для orderId и цены. Я добавляю OrderService в качестве провайдера в app.module.ts 

@NgModule({
  declarations: [
    AppComponent,
    PanelComponent,
    HomepageComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [OrderService],
  bootstrap: [AppComponent]
})

Я прочитал, что причина может быть в том, что я использую Router (AppRoutingModule). Но я понятия не имею, чтобы решить эту проблему.

Маршрутизация приложений: 

...
const routes: Routes = [
  {
    path: 'panel',
    component: PanelComponent,
    children: [
      { path: 'homepage', component: HomepageComponent},
      { path: 'orderpage', component: OrderpageComponent}
    ]
  },
  { path: '', redirectTo: 'panel', pathMatch: 'full'}
];

@NgModule({
  declarations: [],
  exports: [RouterModule],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ]
})

export class AppRoutingModule { }
...