общий сервис не обновил данные до родительского компонента angular

Question

привет, я новичок в angular 5, у меня есть общий сервис в appmodule, это сервис

import { DetailTransaksi } from '../models/DetailTransaksiModel'
@Injectable()
export class TransaksiService {

  UserTrans:Transaksi;

  constructor() {
    this.UserTrans = new Transaksi();
  }

  getTransaksi(){
    return this.UserTrans;
  }

  addDetail(data:DetailTransaksi){
    this.UserTrans.ListDetail.push(data);
  }

  countDetail(){
    return this.UserTrans.ListDetail.length;
  }

}

дочерний компонент находится в пределах router-outlet, затем в дочернем компоненте я вызвал addDetail() метод, но родительский компонент app.component не обновился, когда я вызываю countDetail, это мой родительский компонент

import { Component, OnInit } from '@angular/core';
import { TransaksiService } from './services/transaksi.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  numPesanan:number;

  constructor(private transService:TransaksiService){
  }

  ngOnInit(){
    this.numPesanan = this.transService.countDetail();

  }
}

Answer 1

Проблема в том, что ваш ngOnInit() будет запущен только один раз, а код this.numPesanan = this.transService.countDetail(); будет запущен только один раз. Возможны два способа обновления родительского элемента.

1. Сделайте что-нибудь с родителем, чтобы снова запустить countDetail () службы. Например, после нажатия кнопки вызовите этот метод службы.
2. Заставьте родителя слушать изменения в обслуживании.

В вашем сервисе сделайте переменную:

// private makes it to update only within the service.
private listLength = new Subject<Number>();
// public variable will be used to only observe the changes
listLengthObservable = this.listLength.asObservable();

addDetail(data:DetailTransaksi){
    this.UserTrans.ListDetail.push(data);
    this.listLength.next(this.countDetail());
}

В родительском компоненте:

this.transService.listLengthObservable.subscribe((updatedLength) => {
    this.numPesanan = updatedLength
})