从Angular 4中的另一个组件函数调用组件函数

Question

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

以下组件显示总价在这里选择运输组件单按钮时，TotalAmountWithDisocunt是需要更改的总价格neck-out-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();
  };
}

neck-out-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

我推荐四种方法：您可以使用它的简单！

1. 使用事件发射极

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

   当更改时，您可以发射数据

   this.shipmentInfoEmitter.emit(data);
   

   您可以通过

   消费

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

2. 使用@Input＆amp;@output

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

装运方法更改传递给父母和父母，以结帐详细信息

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

4. 使用redux/ngrx

Answer 2

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

另外，您可以在DataService中将orderDetails成为可观察的(我建议rxjs/BehaviorSubject(。您可以在CheckOutProductsComponent的ngOnInit中订阅它。

dataService

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

CheckoutProductsComponent

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

shippingmethodscomponent

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