[英]Child component updates parent then parent updates another child component's Input value
[英]Angular @Input in child component also updates value in parent component
在角度中,屬性上的@Input與[propertyNameInParent] =“propertyNameInChild”結合使用,允許我們將父屬性的值綁定到子屬性。 也稱為單向綁定。 扼殺,在我的情況下,它也在更新父類中的屬性。 這怎么可能?
父組件 - > favorite-cities子組件 - > city-detail
因此,基本上在(點擊)事件中,最喜歡的城市是select(selectedCity屬性)。 然后在城市細節組件中,城市可以通過單擊onPlusIconClick()來接收喜歡。 不知怎的,這也引發了最受歡迎城市的城市化進程。 為什么我不必使用eventemitter將更新后的值發送回父組件?
最喜歡的,cities.component.ts
import {Component, OnInit} from '@angular/core';
import {CitiesService} from '../../services/cities.service';
import {City} from '../../model/city';
@Component({
selector: 'app-favorite-cities',
templateUrl: './favorite-cities.component.html',
styleUrls: ['./favorite-cities.component.css']
})
export class FavoriteCitiesComponent implements OnInit {
cities: City[];
selectedCity: City;
constructor(private citiesService: CitiesService) {
}
ngOnInit() {
this.citiesService.getCities().subscribe(
(data) => this.cities = data,
(err) => console.log(err),
() => { }
);
}
setSelectedCity(city: City): void {
this.selectedCity = city;
}
}
最喜歡的,cities.component.html
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-4">
<h2>Mijn favoriete steden zijn: </h2>
<ul class="list-group" *ngFor="let city of cities">
<li class="list-group-item" (click)="setSelectedCity(city)">{{city.id}} - {{city.name}}
<span class="float-right badge badge-success">Likes {{city.rating}} . </span>
</li>
</ul>
</div>
<div class="col-4">
<app-city-detail [selectedCity]="selectedCity"></app-city-detail>
</div>
</div>
</div>
城市detail.component.ts
import {Component, Input, OnInit} from '@angular/core';
import {City} from '../../model/city';
import {CitiesService} from '../../services/cities.service';
@Component({
selector: 'app-city-detail',
templateUrl: './city-detail.component.html',
styleUrls: ['./city-detail.component.css']
})
export class CityDetailComponent implements OnInit {
@Input()
selectedCity: City;
constructor(private citiesService: CitiesService) {
}
ngOnInit() {
}
onMinusIconClick(): void {
if (this.selectedCity.rating > 0) {
this.selectedCity.rating -= 1;
}
this.citiesService.updateRatingOfCity(this.selectedCity).subscribe(
(data) => { console.log('oaksdoaks'); },
);
}
onPlusIconClick(): void {
this.selectedCity.rating += 1;
this.citiesService.updateRatingOfCity(this.selectedCity).subscribe();
}
}
城市detail.component.html
<div *ngIf="selectedCity">
<div class="container-fluid">
<div class="row">
<h2>City details</h2>
<div class="col-1">
<i (click)="onPlusIconClick()" class="fas fa-2x fa-plus-square"></i>
</div>
<div class="col-1">
<i (click)="onMinusIconClick()" class="fas fa-2x fa-minus-square"></i>
</div>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">Naam: {{selectedCity.id}} </li>
<li class="list-group-item">Provincie: {{selectedCity.provincie}}</li>
<li class="list-group-item">Highlights: {{selectedCity.highlights}} </li>
</ul>
<img class="img-fluid" src="assets/img/{{selectedCity.name.trim()}}.jpg" >
因為您正在輸入一個對象,這只是一個參考 。 因此父級和子級具有引用完全相同對象的屬性。
如果這是不需要的行為,則必須在設置所選城市時創建淺色副本。 或者在您更新的任何其他地方..有很多選擇:
setSelectedCity(city: City): void {
this.selectedCity = { ...city }; //shallow copy
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.