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

Question

有两个部分，一个显示总价，另一个有运输方式。这些是在购物车结账页面上实现的。当我改变运输方式时。它需要反射(reflect)在结账组件的总价上。

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

check-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和@Output与家长交谈

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

发货方式更改传递给父级，父级推送到结帐详细信息

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

使用 Redux/ngrx