如何在Angular 4中将值从子组件传递到父组件 [英] How to pass values from child to parent component in Angular 4

问题描述

我正在Angular4应用程序中工作，正在尝试将值从子组件传递到父组件.我已经实现了一些东西，但无法获得预期的输出.

I am working in an Angular4 application ,In I'm trying to pass values from child component to parent component .I have implemented something but I can't get the output as expected.

子组件图片...

子组件代码...

  <div class="row">
                    <div class="col-3">
                        <input type="text" readonly  class="form-control col-8 text-center bg-white font-weight-bold " id="counterval" value="{{counter}}" #Totalcartval>
                    </div>         
                        <a class="btn btn-primary text-white" (click)="decrement()" role="button">
                            <i class="fa fa-minus" style="font-size:15px"></i>
                        </a>
                        <div class="col-1"></div>
                        <a class="btn btn-primary text-white" (click)="increment()"  role="button">
                            <i class="fa fa-plus" style="font-size:15px"></i>
                        </a>            
                </div>

 <button type="button" (click)="sendRecord(Totalcartval.value)" class="btn btn-success" data-toggle="modal" data-target=".bd-example-modal-lg">Add To Cart</button>

子组件.ts代码...

Child component .ts code...

import { Component,EventEmitter,Output } from '@angular/core';
import { Router } from '@angular/router';
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 counter : number = 1;   

    increment(){
      this.counter += 1;
    }

    decrement(){  
      if(this.counter >1)
      {
      this.counter -= 1;
      }
    }
    @Output() sendCount : EventEmitter <number> = new EventEmitter<number>();
    public sendRecord(Totalcartval : number ) {  
      this.sendCount.emit(Totalcartval);
    }

  constructor(private router:Router) {
    this.router.events.subscribe(
      () => window.scrollTo(0, 0)
    );
  }

  ngOnInit() {}

}

我在

this.sendCount.emit(Totalcartval);

我无法接收它的父组件并将其显示在必填字段中...

I can't able to receive it it parent component and display it in the required field...

父组件代码.

<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="{{totalcartval}}" readonly >  
        </div>
      </form>

我想在上面的文本框中显示数据

I want to display the data in the above textbox

父组件.ts代码...

Parent component .ts code...

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DatePipe } from '@angular/common';
import { HostListener } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
    today = Date.now();
    fixedTimezone =this.today;
    res : string;

    public totalcartval :number;
    public getRecord(data: number) : void {
            this.totalcartval = data;
    }

    constructor(private http: HttpClient) {

    }
}

在Angular 4中是否有可能将数据从子级绑定到父级?.

And is there any possibility to bind data from child to parent in Angular 4 ..?

谢谢...

推荐答案

您正在使用事件发射器sendCount发射该值. 您必须通过使用子组件像这样在父组件中接收它:

You are emitting the value by using event emitter sendCount. You have to receive it in parent component by using child component like this:

parent.html

<app-my-cart (sendCount)="customFunc($event)"></app-my-cart>

parent.ts

customFunc(data){
    this.totalcartval = data;
}

此外，还有其他通信方式，例如rxjs中的subject或使用共享服务.

Also, there are other ways of communicating like subject in rxjs or by using shared service.

这篇关于如何在Angular 4中将值从子组件传递到父组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！