如何在Angular4

时间:2018-03-16 09:34:10

标签: angular angular4-router angular4-httpclient

我正在使用Angular4应用程序。在此我想将数据从子组件传递到父组件。我解释详细信息......

app.component.html

parent component image

...代码

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

MY-cart.component.html

child component image

...代码

 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() {}
    }

当我添加一些数量并点击&#34;添加到购物车&#34;按钮数量传递到数据库以便通过API存储并获得此行中的响应(数量)

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

现在我想从my-cart.component.html中显示数量计数到app.component.html ....当数据存储在db中时,响应又回来了,我需要立即显示在没有任何时间中断的父组件中计数

我已经将stackoverflow中的一些示例(例如chile)引用到父数据传递中,但没有任何对我有效...

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

Angular有可能吗? 是的,意味着我怎样才能做到这一点......?

4 个答案:

答案 0 :(得分:0)

我没有在您提供的HTML中看到您的购物车组件(我无法看到图片),但如果您确实有父子关系,那么您可以使用它来传递数据从孩子到父母。

在孩子身上

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

答案 1 :(得分:0)

我最近也在为网站创建一个购物车。为此,我不是在父组件和子组件之间传递数据,而是通过服务在组件之间传递数据。我通过表单将产品存储在购物车中

对于视图:

EditText

我使用模糊事件来更新产品数量。你可以使用相同的方法绑定你的 + -

在打字稿中:

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

答案 2 :(得分:0)

使用共享服务在组件之间共享数据而没有任何关系。请阅读此link for more information。我使用来自RxJS的行为主题完成了sample app in stackblitz共享服务。

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

read through this link to know more about BehaviorSubject

共享服务

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

}

答案 3 :(得分:0)

  1. 使用输入绑定将数据从父级传递到子级。 @Input()/ @ Input(别名)。  例如@Input() hero: Hero;

  2. 拦截器输入属性随设置器而变化。使用输入属性设置器 从父母那里截取价值并采取行动。  例如

    @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>

  3. 父级侦听子级事件。  子组件公开一个EventEmitter属性,通过该属性可以在以下情况下发出事件  有事情发生。  父级绑定到该事件属性并对这些事件做出反应。  例子

    @Output() voted = new EventEmitter<boolean>();
    (voted)="onVoted($event)"