我在 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 中将数据从子项绑定(bind)到父项......?
谢谢...
最佳答案
您正在使用事件发射器 sendCount
发射值。
您必须使用这样的子组件在父组件中接收它:
parent.html
<app-my-cart (sendCount)="customFunc($event)"></app-my-cart>
parent.ts
customFunc(data){
this.totalcartval = data;
}
此外,还有其他通信方式,例如 rxjs
中的 subject
或使用共享服务。
关于angular - 如何在 Angular 4 中将值从子组件传递到父组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49228423/