为什么不能以角度将对象从父组件发送到子组件？答案

【问题标题】：why can't send an object from parent component to child component in angular?为什么不能以角度将对象从父组件发送到子组件？
【发布时间】：2020-03-28 11:12:59
【问题描述】：

父组件：

  @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;
    }
 }

我从第一个子组件向父组件发送对象类型的数据。然后我再次将该数据从父组件传递到第二个子组件。父母正在获取数据对象并完美地记录它。但是第二个组件是记录一个空白对象。我不明白我在哪里错过匹配？

【问题讨论】：

标签： angular typescript components

【解决方案1】：

您必须像这样对第二个子组件上的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;
    }
}

【讨论】：

我试过这个方法。但它无法检测到更改，甚至不记录任何内容，甚至是空白对象。
是的，它运行良好。我犯了一个愚蠢的错误。但现在没关系了。非常感谢

【解决方案2】：

您可以使用setter在TripInfoComponent类中设置pick位置（构造函数中的代码仅在组件类实例化时执行）：

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 = " ";
 }

getter 不是强制性的。仅当您需要公开访问位置详细信息时才添加它。否则，您可以使用私人成员_locationDetails。

【讨论】：