Angular 4组件间函数调用：运费变更同步至总价组件问题

在Angular 4里处理兄弟组件间的状态同步，最靠谱的方式就是用共享服务来做通信，毕竟直接调用兄弟组件的方法不仅耦合度高，后期维护也麻烦。下面给你一步步实现的方案：

1. 创建共享通信服务 #

首先我们需要一个全局的服务，用来传递配送费用变化的事件，让两个组件能通过这个服务“对话”：

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

@Injectable()
export class CheckoutService {
  // 用Subject来发送配送费用变化的消息
  private shippingCostUpdated = new Subject<number>();
  
  // 把Subject转换成可观察对象，供其他组件订阅（只允许订阅，不允许直接发送）
  shippingCostUpdated$ = this.shippingCostUpdated.asObservable();

  // 对外暴露的方法，用来触发配送费用更新
  notifyShippingCostChange(cost: number) {
    this.shippingCostUpdated.next(cost);
  }
}

2. 改造配送方式组件 #

在配送组件里，当用户选择不同的配送方式时，调用服务的方法发送费用变化：

配送组件TS文件（shipping-method.component.ts） #

import { Component } from '@angular/core';
import { CheckoutService } from './checkout.service';

@Component({
  selector: 'app-shipping-method',
  templateUrl: './shipping-method.component.html'
})
export class ShippingMethodComponent {
  // 模拟配送选项，你可以根据实际业务替换成接口请求的数据
  shippingMethods = [
    { label: '标准配送', fee: 0 },
    { label: '加急配送', fee: 25 },
    { label: '次日达', fee: 60 }
  ];
  selectedFee = 0;

  constructor(private checkoutService: CheckoutService) {}

  // 单选按钮变化时触发
  onMethodSelected(fee: number) {
    this.selectedFee = fee;
    // 通知服务配送费用更新
    this.checkoutService.notifyShippingCostChange(fee);
  }
}

配送组件HTML文件（shipping-method.component.html） #

<div class="shipping-options">
  <h4>选择配送方式</h4>
  <div *ngFor="let method of shippingMethods">
    <label>
      <input 
        type="radio" 
        name="shipping" 
        (change)="onMethodSelected(method.fee)"
        [checked]="method.fee === selectedFee">
      {{ method.label }} (¥{{ method.fee }})
    </label>
  </div>
</div>

3. 改造总价组件 #

在总价组件里，订阅服务的费用变化事件，实时更新totalAmountWithDiscount：

总价组件TS文件（check-out-product.component.ts） #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { CheckoutService } from './checkout.service';

@Component({
  selector: 'app-check-out-product',
  templateUrl: './check-out-product.component.html'
})
export class CheckOutProductComponent implements OnInit, OnDestroy {
  // 初始总价（假设已经是折扣后的商品总价，不含配送费）
  totalAmountWithDiscount = 199;
  // 保存订阅对象，组件销毁时要取消订阅防止内存泄漏
  private shippingSubscription: Subscription;

  constructor(private checkoutService: CheckoutService) {}

  ngOnInit() {
    // 订阅配送费用变化的消息
    this.shippingSubscription = this.checkoutService.shippingCostUpdated$.subscribe(
      (shippingFee: number) => {
        // 这里替换成你的实际计算逻辑：折扣后商品总价 + 配送费
        this.totalAmountWithDiscount = 199 + shippingFee;
      }
    );
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅
    if (this.shippingSubscription) {
      this.shippingSubscription.unsubscribe();
    }
  }
}

总价组件HTML文件（check-out-product.component.html） #

<div class="checkout-total">
  <h3>应付总价：¥{{ totalAmountWithDiscount }}</h3>
</div>

4. 注册服务到模块 #

最后别忘了在你的根模块（比如AppModule）里注册这个服务，确保两个组件使用的是同一个服务实例：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CheckoutService } from './checkout.service';
import { ShippingMethodComponent } from './shipping-method.component';
import { CheckOutProductComponent } from './check-out-product.component';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [
    AppComponent,
    ShippingMethodComponent,
    CheckOutProductComponent
  ],
  providers: [CheckoutService], // 这里注册服务
  bootstrap: [AppComponent]
})
export class AppModule {}

为什么不用直接调用组件方法？ #

直接通过ViewChild获取兄弟组件实例并调用方法的方式虽然能实现，但会让组件之间耦合度极高——总价组件依赖配送组件的存在，配送组件也要知道总价组件的方法名，后期需求变更时维护成本会很高。而用共享服务的方式，两个组件只依赖服务，彼此完全解耦，更符合Angular的设计理念。

内容的提问来源于stack exchange，提问作者Akhil Sahu