Question

有两个组件一显示总价格和其他有运输方法。这些是在购物车结帐页面上实现的。当我改变运输方式。它需要反映在结账组件的总价格上。

以下组件显示总价这里totalAmountWithDisocunt是选择出货组件单选按钮时需要更改的总价格退房-product.component.ts

 
 
 import { Router,ActivatedRoute  } from '@angular/router';
@Component({
  selector: 'checkout-products',
  templateUrl: './check-out-products.component.html',
  styleUrls: ['./check-out-products.component.css']
})
export class CheckOutProductsComponent implements OnInit {
   
  totalAmountWithDisocunt = 0;
  constructor(public http: Http, public configz: ConfigService,
  public shared: DataService  ) { }

  ngOnInit() {
  	this.orderDetail = (JSON.parse(JSON.stringify(this.shared.orderDetails)));
    this.products = (JSON.parse(JSON.stringify(this.shared.cartProducts)));
    console.log(this.orderDetail);
    this.calculateTotal();
     
    }
  calculateDiscount = function () {
    var subTotal = 0;
    
    this.productsTotal = subTotal;
    this.discount = (subTotal - total);  
  };

   
  calculateTotal = function () {
    let a = 0;
    for (let value of this.products) {
       
      var subtotal = parseFloat(value.total);
      a = a + subtotal;
    }
   
    let b =  (this.orderDetail.tt);
    let c =  (this.orderDetail.shipping_cost );
    this.totalAmountWithDisocunt = a;
      
    this.calculateDiscount();
  };
}

退房-product.component.html

<table class="mdl-data-table mdl-js-data-table oxy-full-width oxy-card-order__summary-table">
                                                 
                                                
                                               
                                                    <tr>
                                                        <td>Subtotal</td>
                                                        <td>  {{productsTotal| currencyChange}}</td>
                                                    </tr>
                                                      <tr>
                                                        <td>Tax</td>
                                                        <td> {{orderDetail.total_tax| currencyChange}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Shipping</td>
                                                        <td>{{orderDetail.shipping_cost| currencyChange}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Total</td>
                                                        <td>{{totalAmountWithDisocunt| currencyChange}}</td>
                                                    </tr>

以下是发货方法组件。单击单选按钮时，选择发货方式并调用setMethod，应在上面的组件中设置发货价格。

import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'shipping-methods',
  templateUrl: './shipping-methods.component.html',
  styleUrls: ['./shipping-methods.component.css']
}) 
export class ShippingMethodsComponent implements OnInit {
 
  shippingMethod  ;
  selectedMethod = true;

  constructor(public http: Http,public configz: ConfigService,
  public shared: DataService ) { 
   }
  
  setMethod(data) {
  	 
    this.selectedMethod = false;
    this.shared.orderDetails.shipping_cost = data.rate;
    this.shared.orderDetails.shipping_method = data.name + '(' + data.shipping_method + ')';
    console.log(this.shared.orderDetails);
  }
 
  ngOnInit() {
  }

}

  
					<div class="mdl-card__supporting-text" >
  							<p>Shipping Methods</p>
  								<div  *ngFor="let m of shippingMethod">
                                                <h5  class="mdl-typography--title mdl-typography--font-light">{{m.name}}</h5 >

                                                <p   *ngFor="let s of m.services"  >

                                                    <label  class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="{{s.name}}">
                                                        <input  type="radio" id="{{s.name}}" [value]="s" (click)="setMethod(s)" class="mdl-radio__button" name="options"  checked />
                                                        <span class="mdl-radio__label">{{s.name+' ---- '+s.rate+' '+s.currencyCode}}
                                                </span>
                                                    </label>
                                                </p>
                                                
                                            </div>
                                        </div>

现在这些用于结帐页面

 <checkout-products></checkout-products>
                                            <shipping-methods></shipping-methods>

当我更改送货方式时，结帐价格不会改变

Answer 1

我推荐四种方式：你可以轻松使用！

使用事件发射器

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

当有更改时，您可以发出数据

this.shipmentInfoEmitter.emit(data);

你可以消费

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

使用@Input＆amp;与父母交谈@Output

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

装运方法更改传递给父级和父级推送到结帐详细信息

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

Answer 2

使用服务。您的DataService似乎全局提供，并在两个组件中用于存储orderDetails。只需将计算方法移到那里，就可以使用this.shared.calculateTotal()。

或者，您可以将orderDetails DataService中的rxjs/BehaviorSubject视为可观察者（我建议CheckOutProductsComponent）。您可以在ngOnInit orderDetailsObservable: BehaviorSubject<OrderDetailsInterface> = new BehaviorSubject(this.orderDetails);。

中订阅

<强>的DataService

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

<强> CheckOutProductsComponent

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

<强> ShippingMethodsComponent

$options = [
    'options' => [
        'default'   => null,
        'min_range' => 1,
        'max_range' => 255,
    ]
];

if (isset($_REQUEST['id'])) {
    $id = filter_var($_REQUEST['id'], FILTER_VALIDATE_INT, $options);
    if ($id) {
        // TODO:
    }
}

以角度4调用另一个的组件功能

2 个答案: