Счастливое Кодирование

аюсь создать простое приложение для корзины покупок. У меня есть два компонента и сервис корзины, как показано ниже.

<app-header></app-header>

<app-cart></app-cart> 

В корзине есть все функции для добавления товара в корзину, удаления товара в корзине, количества в корзине и т. Д.

Мне нужно обновить количество корзин в компоненте заголовка, когда пользователь добавляет продукт в корзину.

Как это сделать с помощью общего сервиса.

 Ivan Mladenov04 окт. 2017 г., 11:14
В чем вопрос - как создать общий сервис или как добраться от одного компонента к другому?

Ответы на вопрос(5)

если он принадлежит одному и тому же предку. Например, у вас естьapp-header а такжеapp-cart которые являются частьюAppModule, Так что, если вы добавитеSharedCartService кproviders массив вашего модуля, два компонента получат один и тот же экземпляр этого сервиса.

Внедрение зависимости а такжевнедрение иерархической зависимости

Subject изRxJs, В вашей корзине вы подпишетесь на какой-то счетчик в вашем сервисе, чтобы вы могли обновлять информацию о корзине вapp-header.

Создать сервис с помощью: -

ng g service data

После этого ваш вывод может выглядеть примерно так:

installing service
   create src\app\data.service.spec.ts
   create src\app\data.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

Предупреждение просто означает, что мы должны добавить его в свойство provider декоратора NgModule в src / app / app.module.ts, так что давайте сделаем это:

import { DataService } from './data.service';

@NgModule({
   providers: [DataService],
})

Теперь, когда мы создали сервис, давайте посмотрим, что создал Angular CLI:

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

@Injectable()
export class DataService {

  constructor() { }

}

Теперь создайте функцию, которая хранит ваши данные вdata.service.ts

constructor() { }
 public currentData: any;
 storeData(dataFromComponent){
   this.currentData = dataFromComponent;
 }
 getData(){
   return this.currentData; 
 }

Сейчас вapp.component

 import { DataService } from './data.service';

 export class AppComponent {

  constructor(private dataService:DataService) {

  }
   anytimeSaveData(){
      // to store data in service call storeData function
     this.dataService.storeData("Hello! I have some data here..");
   }
}

чтобы получить данные в другом компоненте, просто импортируйте наш сервис и позвонитеполучить данные функция

 export class HomeComponent {

  constructor(private dataService:DataService) {

  }
      // to get data from service call getData function
     console.log(this.dataService.getData());
}

Вывод в консоль

Здравствуйте! У меня есть некоторые данные здесь ..

Счастливое Кодирование

Решение Вопроса

В этом случае Вы можете воспользоваться услугой сsubject, Служба в Angular является одноэлементной, что означает, что она управляется как один экземпляр. Таким образом, если каждый из компонентов получает доступ к службе, они получат доступ к одинаковым общим данным.

export class cartService{
    private prodCount = 0;
    prodCountCountChange: Subject<number> = new Subject<number>();
    UpdateCount(count: number) {
        this.prodCount = count;
        this.prodCountCountChange.next(this.prodCount);
    }
}

В вашем компоненте вы можете сделать это,

  this._cartService.UpdateCount(this.prod.length);

Shared Service, Это же событие будет отправлено из вашего компонента корзины.

Пожалуйста, посмотрите на этот plunkrhttps://plnkr.co/edit/LS1uqB?p=preview

Ваш ответ на вопрос