[英]Binding data to another component and use it in angular using @Input, @Output and EventEmitter
I am trying to pass the one team from array of team in another component and use it. 我正在尝试将一组团队中的一个团队传递给另一个组件,并使用它。 I am getting selected team in same component(team) as console.log but not getting in the another component(team-detail) 我在与console.log相同的组件(团队)中选择了团队,但没有在另一个组件中(团队详细信息)
Actually, I want to use team id to fetch details of other detail about team from API. 实际上,我想使用团队ID从API获取有关团队的其他详细信息。 please help me around this TIA 请帮助我解决这个TIA
Team.component.ts Team.component.ts
export class TeamsComponent implements OnInit {
@Output() selectedTeam = new EventEmitter<any>();
constructor(private general: GeneralService) {
}
teamsObject: any;
teams: [];
ngOnInit() {
this.loadTeams();
}
loadTeams() {
this.general.getTeams().subscribe(data => {
this.teamsObject = data;
this.teams = this.teamsObject.teams;
});
}
onSelectTeam(team: any) {
this.selectedTeam.emit(team);
}
}
Team.component.html Team.component.html
<div class="container-fluid " >
<div class="row " >
<div class="col-xs-12" *ngFor="let team of teams">
<div class="card border-dark " style="width: 250px; height: 450px; margin: 10px;" (click)="onSelectTeam(team)">
<img class="card-img-top embed-responsive" src="{{team.crestUrl}}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{team.name}}</h5>
<p class="card-text">{{team.address}}</p>
<a href="{{team.website}}" class="btn btn-primary" target="_blank">Visit Website</a>
</div>
</div>
</div>
</div>
<app-team-detail *ngIf="selectedTeam" [team]="selectedTeam"></app-team-detail>
</div>
Team-detail component 团队细节部分
export class TeamDetailComponent implements OnInit {
@Input() team: any;
constructor() {
}
ngOnInit() {
}
}
team-detail template(this template only for demo purpose.) 团队详细信息模板(此模板仅用于演示目的。)
<p>
{{team.name}}
{{team.crestUrl}}
{{team.address}}
{{team.website}}
</p>
“Output” identifies the events a component can fire to send information up the hierarchy to its parent. “输出”标识组件可以触发以将层次结构中的信息发送到其父级的事件。 In you case you want to send information from parent component to child. 在这种情况下,您希望将信息从父组件发送到子组件。 So you don't need to use Output. 因此,您无需使用Output。
Team.component.ts Team.component.ts
export class TeamsComponent implements OnInit {
selectedTeam:any;
constructor(private general: GeneralService) {
}
teamsObject: any;
teams: [];
ngOnInit() {
this.loadTeams();
}
loadTeams() {
this.general.getTeams().subscribe(data => {
this.teamsObject = data;
this.teams = this.teamsObject.teams;
});
}
onSelectTeam(team: any) {
this.selectedTeam = team;
}
}
team.component.html team.component.html
<app-team-detail *ngIf="selectedTeam" [team]="selectedTeam"></app-team-detail>
team-details template 团队细节模板
<p *ngIf="team">
{{team.name}}
{{team.crestUrl}}
{{team.address}}
{{team.website}}
</p>
create your property with getter and setter in you child component , rest of code remain as is 在子组件中使用getter和setter创建属性,其余代码保持原样
_team: any;
get team(): any {
return this._team;
}
@Input()
set team(value: any) {
this._team = value;
}
in child 在孩子
<p *ngIf="team">
{{team.name}}
{{team.crestUrl}}
{{team.address}}
{{team.website}}
</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.