![](/img/trans.png)
[英]How to pass API returning data array values from Parent Component to Child Component in Angular
[英]How to pass values from child to parent component in Angular 4
我正在使用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中是否有可能將數據從子節點綁定到父節點?
謝謝...
您使用事件發射器sendCount
發出值。 你必須使用這樣的子組件在父組件中接收它:
parent.html
<app-my-cart (sendCount)="customFunc($event)"></app-my-cart>
parent.ts
customFunc(data){
this.totalcartval = data;
}
此外,還有其他方式可以在rxjs
使用subject
或使用共享服務進行通信。
在角度4中,您可以使用@輸入,@輸出裝飾器作為值或發送數據。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.