如何在Angular 4中将值从子组件传递到父组件

Posted 2023-02-23

【中文标题】如何在Angular 4中将值从子组件传递到父组件

【英文标题】：How to pass values from child to parent component in Angular 4

【发布时间】：2018-08-20 01:42:45

【问题描述】：

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

子组件图像...

子组件代码...

  <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 代码...

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

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

父组件代码..

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

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

父组件.ts代码...

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 中是否有可能将数据从子级绑定到父级？

谢谢...

【问题讨论】：

发布完整的父组件 HTML。我看不到您的子组件包含在父 HTML 中

当然，给我一分钟...

我看不到父组件 HTML 中包含您的子组件 HTML 标记。即 <app-my-cart></app-my-cart> 在您的父组件 HTML

【参考方案1】：

您正在使用事件发射器sendCount 发射值。 您必须使用这样的子组件在父组件中接收它：

parent.html

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

parent.ts

customFunc(data)
    this.totalcartval = data;

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

【讨论】：

在父组件中我应该在哪里保留第一行

当您在 parent.ts 中接收数据时将其分配给一个变量并在您的文本框中使用该变量并不重要：customFunc(event) this.totalcartval = event;

我已经编辑了我的答案，以便于查看

现在我有一个问题，子组件显示了 2 次。我有一个登陆页面，在那里我列出了一些产品，如果我点击一个产品，它将导航到子组件（添加到购物车页面）。我可以增加产品数量并点击添加到购物车按钮。这里的标题和页脚对所有页面都是通用的，现在我在页眉部分显示 Totalcartval。如果我放置 这一行在父组件中，我得到了输出，但添加到购物车页面在主页中显示了 2 次。（使用 routerlink 导航 btw 页面）。

我该如何解决它..当点击特定产品时，我使用 routerLink="/my-cart" 这种技术导航到添加到购物车页面...

【参考方案2】：

在 Angular 4 中，您可以将 @Input、@Output 装饰器用于值或 Emit 数据。

请参考 https://angular.io/guide/component-interaction