У меня есть 2 компонента: дочерний и родительский.
Моя веб-страница изначально содержит HTML родительского компонента, который является базовой таблицей данных. Я хочу отобразить более подробную информацию о каждой строке данных из моей таблицы. поэтому, когда я нажимаю на строку, я хочу отобразить шаблон дочернего компонента, который содержит эти детали!
app-match-monitor
- это селектор дочернего компонента, и я хочу
<app-match-monitor [matchId]="matchId" [events]="eventsSubject.asObservable()">
<p>Hey there</p>
</app-match-monitor>
отображается в браузере только при нажатии на OnSelectedMatch(match.id)
Это шаблон родительского компонента:
<div class="dashboard">
<app-match-monitor [matchId]="matchId" [events]="eventsSubject.asObservable()">
<p>Hey there</p>
</app-match-monitor>
<div class="match_list_container">
<h2>List of matches</h2>
<table class="match_list_table">
<thead>
<tr>
<th>Id</th>
<th >Time</th>
<th>Home team</th>
<th>Away team</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let match of matches" class="choose_match" (click)="OnSelectedMatch(match.id)">
<td>{{(match.id)}}</td>
<td>{{match.date_time}}</td>
<td>{{match.home_team.short_name}}</td>
<td>{{match.away_team.short_name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Это дочерний компонент:
@Component({
selector: 'app-match-monitor',
templateUrl: './match-monitor.component.html',
styleUrls: ['./match-monitor.component.css'],
providers: [MatchService, VideoInfoService, TeamsService]
})
export class MatchMonitorComponent implements OnInit {
matchInfo = {};
status;
homeTeamJersey = {};
awayTeamJersey = {};
tvChannel;
minimap;
urlPreview;
isUpdateMode = 0;
@Input() colorKit;
@Output() colorKitChange: EventEmitter<any> = new EventEmitter();
@Input() matchId;
@Input() events: Observable<void>;
private eventsSubscription: any
constructor(public matchService: MatchService, public teamsService: TeamsService, public videoInfoService: VideoInfoService, public sanitizer: DomSanitizer) {
}
ngOnInit(){
this.eventsSubscription = this.events.subscribe(id => {
this.matchId = id;
this.matchService.getMatchInfo(this.matchId).subscribe(match => {
this.matchInfo = {'id':match.id, 'homeTeam':match['home_team']['name'], 'awayTeam':match['away_team']['name']};
console.log(this.matchInfo);
this.status = match['status'];
this.homeTeamJersey = {'team_id':match['home_team']['id'], 'jerseyColor':match['home_team_kit']['jersey_color'], 'numberColor':match['home_team_kit']['number_color'], 'seasonKitList': []};
this.awayTeamJersey = {'team_id':match['away_team']['id'], 'jerseyColor':match['away_team_kit']['jersey_color'], 'numberColor':match['away_team_kit']['number_color'], 'seasonKitList': []};
this.urlPreview = this.sanitizer.bypassSecurityTrustResourceUrl(`/api/match/${this.matchId}/decoder_preview`);
this.minimap = this.sanitizer.bypassSecurityTrustResourceUrl(`/app/match/${this.matchId}/embeddable`);
})
this.videoInfoService.getVideoAndMatchInfo(this.matchId).subscribe(res => {
this.tvChannel = res['source']['name'];
});
})
}
}
и это функция OnSelectedMatch(match.id)
родительского компонента:
private eventsSubject: Subject<void> = new Subject<void>();
OnSelectedMatch(id) {
this.matchId = id;
this.eventsSubject.next(id)
this.currentState = this.currentState === 'initial' ? 'final' : 'final';
}
матч-monitor.component.html:
<div class="match_details" *ngIf="isUpdateMode == 0">
<div class="form-group row">
<label class="col-sm-5 col-form-label">Tv channel</label>
<div class="col-sm-5">
<input name="Tvchannel" class="form-control" style=" margin-left: 31%; text-align: center;" type="text" value={{tvChannel}}/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-7 col-form-label">{{matchInfo.homeTeam}}</label>
<span class="color-box" [style.background-color]="homeTeamJersey.jerseyColor" [style.color]="homeTeamJersey.numberColor">Number</span>
</div>
<div class="form-group row">
<label class="col-sm-7 col-form-label">{{matchInfo.awayTeam}}</label>
<span class="color-box" [style.background-color]="awayTeamJersey.jerseyColor" [style.color]="awayTeamJersey.numberColor">Number</span>
</div>
<button class="btn btn-success" style="width: 100px; float: left;" (click)="onUpdateTeamColor()">Update</button>
</div>
Любые идеи о том, как я могу сделать эту работу, пожалуйста?