Как вывести в глобальный контекст переменную в Angular2?

Question

Alexander Belov @AlexanderBelov

Frontend developer

Как вывести в глобальный контекст переменную в Angular2?

У меня в приложении Angular2 есть "Catalog" и "Cart" компоненты, имеющие также сервисы Catalog service м Cart service.

Есть массив с продуктами в Catalog component и мне нужно оттуда по клику добавлять их в Cart массив (изначально пустой).

Catalog Component:

import { Component, OnInit } from '@angular/core';
import { CatalogService } from './catalog.service';
import { CartComponent } from '../cart/cart.component';//импортирую компонент, чтобы иметь доступ к массиву "cart" внути него

@Component({
  selector: 'catalog',
  templateUrl: './catalog.component.html',
 styleUrls: ['./catalog.component.scss']
})

export class CatalogComponent implements OnInit {
    catalog: any;
    image: any;
    title: string;
    description: string;
    prod: any;
    visible: boolean;

constructor(public catalogService: CatalogService){ } 

ngOnInit(){

    this.catalogService.getCatalogItems().subscribe(
        (data) => this.catalog = data
    );
}

getPrev(){
    this.catalog.push(this.catalog[0]);
    this.catalog.shift();
}

getNext(){
    this.catalog.unshift(this.catalog[this.catalog.length-1]);
    this.catalog.pop();
}

 togglePopup(prod){
    this.prod = prod;
    this.visible = !this.visible;
    this.image = prod.image;
    this.title = prod.title;
    this.description = prod.description;
}

   toCart(prod){
     this.cart.push(prod);//добавляю продукт в массив "cart"
   }

}

Cart Component:

import { Component, OnInit } from '@angular/core';
import { CartService } from './cart.service';

@Component({
    selector: 'cart',
    templateUrl: './cart.component.html',
    styleUrls: ['./cart.component.scss']
})

export class CartComponent implements OnInit {

    constructor (private cartService: CartService, public cart: Cart[]){}//объявляя глобальную переменную "public cart: Cart[]" я предполагаю, что могу ссылаться теперь на неё из любой части приложения, куда импортирую CartComponent

    ngOnInit(){
        this.cartService.getCartItems();
    }
}

Catalog Service:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()
export class CatalogService {
    constructor(private http: Http){ }

  getCatalogItems() {
      return this.http.get('../catalog.json')//в массиве "catalog.json" есть объекты по умолчанию
      .map((res) => res.json())
  }
}

Cart Service:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()
export class CartService {
   constructor(private http: Http){ }

  getCartItems() {
      return this.http.get('../cart.json')//пустой массив по умолчанию "cart.json", куда я хочу добавлять продукты Catalog Component
      .map(
        (res) => res.json()
      );
  }
}

Несмотря на то, что я объявил глобальную переменную Cart ("public cart: Cart[]" в Cart Component) и импортировал Cart Component в Catalog Component, эта переменная не видна там.

Как создать единый массив Cart и объявить его переменную, чтобы она была доступна по всему приложению глобально? Т.е., чтобы можно было добавлять / удалять из этого массива что-нибудь и изменения в нём происходили сразу же автоматически (и все компоненты, ссылающиеся на него, сразу же работали с уже изменённым массивом, без новых переопределений).