Angular @Input в дочернем компоненте также обновляет значение в родительском компоненте - PullRequest
Новая
       36

Angular @Input в дочернем компоненте также обновляет значение в родительском компоненте

0 голосов
/ 26 февраля 2019

В угловом выражении @Input для свойства в сочетании с [propertyNameInParent] = ”propertyNameInChild” позволяет нам связать значение родительского свойства с дочерним свойством.Также известен как односторонняя привязка.Странно, но в моем случае это также обновление свойства в родительском классе.Как это возможно?

Родительский компонент -> любимые города Дочерний компонент -> детали города

Таким образом, в основном при (щелчке) событии выбирается любимый город (свойство selectedCity).Затем в компоненте city-detail город может получать лайки, нажав onPlusIconClick ().Каким-то образом это также вызывает повышение рейтинга городов в любимых городах.Почему мне не нужно использовать Eventemitter, чтобы отправить обновленное значение обратно в родительский компонент?

favourities-city.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;
}

}

Favorites-towns.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>

city-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();
}
}

city-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" >

1 Ответ

0 голосов
/ 26 февраля 2019

Поскольку вы вводите объект, а это всего лишь ссылка .Таким образом, у родительского и дочернего объекта есть свойство, ссылающееся на один и тот же объект.

Если это нежелательное поведение, вам нужно создать мелкую копию при настройке выбранного города.Или в любом другом месте, где вы обновляете .. Есть много вариантов: 

setSelectedCity(city: City): void {
  this.selectedCity = { ...city }; //shallow copy
}
...