共享服务没有将数据更新到父组件 angular

Question

你好，我是angular5的新人，我在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 的父组件在我调用 [=15] 时没有更新=], 这是我的父组件

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(); 只会运行一次。您可以通过两种方式更新父项。

对父级执行一些操作，以便服务的 countDetail() 再次运行。例如，单击按钮时，调用该服务的方法。
让家长听到服务的变化。

在您的服务中，创建一个变量：

// 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
})

共享服务没有将数据更新到父组件 angular

shared service didn't update data to parent component angular

javascript

typescript

router-outlet

angular