Javascript 从angular 4中的另一个调用components函数

有两个组件，一个显示总价，另一个有发货方式。这些在购物车结帐页面上实现。当我改变运输方式时。它需要反映在结帐组件的总价上

以下组件显示了总价 此处totalAmountWithDisocunt是选择装运组件单选按钮时需要更改的总价 签出-product.component.ts

从'@angular/Router'导入{Router，ActivatedRoute}；
@组成部分({
选择器：'签出产品'，
templateUrl:“./check out products.component.html”，
样式URL:['./签出products.component.css']
})
导出类CheckOutProductsComponent实现OnInit{
totalAmountWithDisocunt=0；
构造函数（公共http:http、公共configz:ConfigService、，
公共共享：数据服务）{}
恩戈尼尼特（）{
this.orderDetail=（JSON.parse（JSON.stringify（this.shared.orderDetails））；
this.products=（JSON.parse（JSON.stringify（this.shared.cartProducts））；
console.log（this.orderDetail）；
这是calculateTotal（）；
}
CalculateDiscovery=函数（）{
var小计=0；
this.productsTotal=小计；
该折扣=（小计-总计）；
};
calculateTotal=函数（）{
设a=0；
对于（让本产品的价值）{
var小计=parseFloat（value.total）；
a=a+小计；
}
设b=（this.orderDetail.tt）；
设c=（this.orderDetail.shipping_cost）；
this.totalAmountWithDisocunt=a；
这个.calculateDiscount（）；
};
}

使用服务。看起来您的

DataService

是全局提供的，并在两个组件中用于存储

orderDetails

。只要将您的计算方法移到那里，就可以使用

this.shared.calculateTotal（）

或者，您可以将

DataService

中的

orderDetails

设置为可观察的（我建议

rxjs/BehaviorSubject

）。您可以在

CheckOutProductsComponent

的

ngOnInit

中订阅它

数据服务

orderDetailsObservable: BehaviorSubject<OrderDetailsInterface> = new BehaviorSubject(this.orderDetails);

发货方法组件

ngOnInit() {
    this.shared.orderDetailsObservable.subscribe(
        next => {
                this.orderDetail = (JSON.parse(JSON.stringify(next)));
                this.calculateTotal();
            }
        );
    }

setMethod(data) {    
    this.selectedMethod = false;
    // get the existing orderDetails
    const orderDetails = this.shared.orderDetailsObservable.value;
    // override values
    orderDetails.shipping_cost = data.rate;
    orderDetails.shipping_method = data.name + '(' + data.shipping_method + ')';
    // update Observable
    his.shared.orderDetailsObservable.next(orderDetails);
}

---

我推荐四种方法：你可以用哪一种更容易

使用事件发射器

 @Output() shipmentInfoEmitter: EventEmitter<any> = new EventEmitter();

你可以通过

this.yourService.shipmentInfoEmitter.subscribe(user => this.updateUser(user));

使用@Input&@Output与家长交谈

<parent>
  <checkout-products [update]="callParent($event)">
  </checkout-products>
<shipping-methods [change]="products"></shipping-methods>

装运方式更改传递到父级，父级推送到签出详细信息

使用相同的服务存储此信息

使用Redux/ngrx

---

这是很多代码。如果你只粘贴问题的相关代码，而不是你的应用程序的一半，那就容易多了…@masterfloda edited然后我必须将它的所有变量移到那里。我用另一种方法更新了我的anser，使用了一个可观察的。

<parent>
  <checkout-products [update]="callParent($event)">
  </checkout-products>
<shipping-methods [change]="products"></shipping-methods>