Angular4如何将数据从子组件传递到父组件

Question

我在 Angular4 application.In 中工作我想将数据从子组件传递给父组件 component.let 我解释一下细节...

app.component.html

代码...

 <div class="col-3">
          <br>
          <form class="form-inline">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">
                    <i class="fas fa-shopping-bag text-primary" style="font-size:40px"></i>
                </span>
              </div>
              <input type="text" class="form-control bg-white"  placeholder="My Cart" value="  My Cart  {{totalcartval}} Item(s)" readonly >  
            
            </div>
          </form>
        </div>

我的-cart.component.html

代码...

 import { Component,EventEmitter,Output } from '@angular/core';
    import { Router } from '@angular/router';
    import { HttpClient } from '@angular/common/http';
    import { SessionStorageService,SessionStorage } from 'angular-web-storage';
    
    
    @Component({
      selector: 'app-my-cart',
      templateUrl: './my-cart.component.html',
      styleUrls: ['./my-cart.component.css'],
      outputs :['ChildEvent']
    })
    
    export class MyCartComponent  {

    public sendRecord(Totalcartval : number ) {  
          this.http.get('http://freegeoip.net/json/?callback')
                     .subscribe(
                        data => this.saveIP(data['ip'],Totalcartval),
                        error => console.error(error)
                     );
        }
        saveIP(address: string,cartval :number) {
          this.http.get(`http://localhost:57036/api/data/CartCount/?IP_ADDRESS=${address}&ITEM_QTY=${cartval}&TIME=${this.fixedTimezone}`)
                   .subscribe(data => this.res = data['ITEM_QTY']);
      }  
    ngOnInit() {}
    }

当我添加一些数量并单击“添加到购物车”按钮时，数量将通过 API 传递到数据库进行存储，并在此行中得到响应（数量）

.subscribe(data => this.res = data['ITEM_QTY']);

现在我想从 my-cart.component.html 显示数量计数到 app.component.html ....当数据存储在数据库中时，响应返回，我需要立即不间断地显示父组件中的计数

我已经在 Whosebug 中引用了一些示例，例如 chile 到父数据传递，但对我没有任何作用...

一些示例，如子级到父级的数据传递，需要在父级组件中显示子级组件，但在我的情况下，我不想在父级中显示子级，为什么因为如果我在购物车中添加了一些产品我可以导航回我的父组件并在我的购物车中进一步添加其他产品...

Angular有可能吗？是的，意思是我怎样才能做到这一点...？

Answer 1

我没有在你提供的 HTML 中看到你的购物车组件（而且我看不到图片），但如果你真的有 parent-child 关系，那么你可以使用这将数据从 child 传递到 parent。

在child

constructor(@Host() parent: ParentComponent) {}

现在，您可以使用任何您想传递的数据。

比如

this.parent['bridge'] = data; // If you don't want to declare a variable in the parent
this.parent.doSomething(); // Calling a function i the parent
this.parent.myVar = data; // If you have declared a variable in the parent

Answer 2

我还致力于为网站创建购物车 recently.For 这不是在父组件和子组件之间传递数据，而是通过 service.i 在组件之间传递数据通过表格在购物车中的产品。

对于视图：

<div class="products" *ngFor= "let product of Object.values(getItemsFromCartService()) ">
        <div class="product">
          <img [src]="product['imgURL']" [alt]="product.productSelected">
          <h4>{{product.productSelected}}</h4>
        </div>
        <div class="quantity">
          Qty.
            <input #qty (blur)="updateQuantity(product, qty.value)" type="number" name="Quantity" [value]="product.Quantity" class="form-control">
        </div>
        <span class="glyphicon glyphicon-trash" (click)="removeItem(product.productSelected)"></span>
        <div class="productQtnPrice">
              <h4 class="totalPrice"><i class="fa fa-inr"></i> {{product.totalPrice}} </h4>
        </div>
    </div>

我使用了 blur 事件来更新产品的数量。您可以将相同的方法绑定到您的 + 和 -.

打字稿中：

getItemsFromCartService() {
    this.totalItemsInCart = this._cartService.getAllItems();
    this.setItemDetails();
    console.log(this.totalItemsInCart);
    return this.totalItemsInCart;
}

updateQuantity(product, newQuantity) {
        console.log("Updating quantity");
        this._cartService.updateQuantity(product, newQuantity);
    }
removeItem(productName) {
        this._cartService.removeItem(productName);
    }

Answer 3

使用共享服务在没有任何关系的组件之间共享数据。请使用来自 RxJS 的行为主题阅读此 link for more information. I have done a sample app in stackblitz 与共享服务。

所有组件都可以访问和更改同一消息实例。

.

共享服务

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

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject<string>("default message");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

Answer 4

使用输入绑定将数据从父级传递到子级。 @Input()/@Input(别名)。例如，@Input() hero: Hero;
拦截输入属性随 setter 变化。使用输入属性 setter 来拦截并根据来自父级的值采取行动。例如，

@Input() set name(name1: string) { this._name = (name1 && name1.trim()) || '<no name set>’; }

例如，

@Input() set age(ageNum: number) { this._age = (ageNum) || '<no age set>’; }

<app-name-child *ngFor="let personName of names" [name]=“personName“ [age]=“personage”></app-name-child>
父级监听子级事件。子组件公开了一个 EventEmitter 属性，当它发出事件时有事情发生。父级绑定到该事件属性并对这些事件做出反应。例如，

@Output() 投票 = new EventEmitter<boolean>();<br> （已投票）="onVoted($event)"

Angular4如何将数据从子组件传递到父组件

How to pass data from child component to parent component in Angular4

angular

angular4-httpclient

angular4-router