почему нельзя отправить объект из родительского компонента в дочерний компонент в angular?

Question

родительский компонент:

  @Component({
    selector: 'app-tripCreation',
    templateUrl: 
     ' <app-location (sendLocationDataEvent)="getLocationData($event)"></app-location>
      <app-tripInfo [locationDetails]="locationData"></app-tripInfo> '
    styleUrls: ['./tripCreation.component.scss']
 })

export class TripCreationComponent{
    locationData = {};

    getLocationData(response: any)
    {
        this.locationData = response
        console.log(this.locationData); // {pickAddressName: "KARWAN BAZAR, TEJGAON, DHAKA CITY", pickAreaID: 346, pickUnionID: 8195, pickThanaID: 512, …}

    }
}

первый дочерний компонент:

  @Component({
    selector: 'app-location',
    templateUrl: 
         '<button type="button" class="btn" id = "set" (click)="setData()" >setData</button>',
    styleUrls: ['./location.component.scss']
  })

  export class LocationComponent{
      locationDetails: any = {}; 
      @Output() sendLocationDataEvent = new EventEmitter<any>();

      setData(){

          this.locationDetails.pickAddressName = "KARWAN BAZAR, TEJGAON, DHAKA CITY";
          this.locationDetails.pickAreaID = 346;
          this.locationDetails.pickUnionID = 8195;
          this.locationDetails.pickThanaID = 512;

          this.sendLocationDataEvent.emit(this.locationDetails);
      }
   }

второй дочерний компонент:

@Component({
    selector: 'app-tripInfo',
    templateUrl: 
            '<div *ngIf="pickLocation">
                <p><span>pick location is: {{pickLocation}}</span></p> //pick location is:
            </div>',
    styleUrls: ['./tripInfo.component.scss']
})

export class TripInfoComponent{
    @Input() public locationDetails: any = {};
    pickLocation: srting = " ";

    constructor()
    {
        console.log(this.locationDetails); // {} -> a blank object
        this.pickLocation = this.locationData.pickAddressName;
    }
 }

Из первого дочернего компонента я отправляю данные типа объекта в родительский компонент. Затем я снова передаю эти данные из родительского во второй дочерний компонент. Родитель получает объект данных и прекрасно его регистрирует. Но второй компонент регистрирует пустой объект. Я не могу понять, где я пропущен?

Answer 1

Вы можете использовать установщик для установки местоположения пика в классе TripInfoComponent (код в конструкторе выполняется только при создании экземпляра класса компонента):

export class TripInfoComponent {
    @Input() 
    set locationDetails(locationData: any) {
      this.pickLocation = locationData ? locationData.pickAddressName : '';
      this._locationDetails = locationData;
    }
    get locationDetails(): any {return this._locationDetails;}
    private _locationDetails: any = {};

    pickLocation: string = " ";
 }

Геттер не является обязательным. Добавьте его, только если вам нужен доступ publi c к деталям местоположения. В противном случае вы можете использовать приватный член _locationDetails.

Answer 2

Вы должны реагировать на событие OnChanges во втором дочернем компоненте следующим образом:

export class TripInfoComponent implements OnChanges {
    @Input() public locationDetails: any = {};
    pickLocation: srting = " ";

    constructor() { }

    ngOnChanges (changes: SimpleChanges) {
        console.log(changes.locationDetails);
        this.pickLocation = changes.locationDetails.currentValue;
    }
}