javascript - 共享服务没有将数据更新到父组件角度

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. 在 parent 上做一些事情，以便再次运行服务的 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
})