Angular 2 向孩子发送数据答案

【问题标题】：Angular 2 Sending data to childAngular 2 向孩子发送数据
【发布时间】：2017-05-12 13:33:58
【问题描述】：

当我从 TransportComponent 向 TruckComponent 发送数据时，为什么我会获得未定义的卡车值？

 export class TransportComponent {
 actualTransport: Subject<any> = new Subject();

 this.serviceTransport.subscribe( (data) => {   
            data.transports.forEach(transport => {
              this._truckService.getTruck(transport.idTransport)
                .subscribe((truck) => {
                  data.truck = truck ///Here I add to data field truck
                });
            });
          this.actualCourse.next(truck);
        });
 }

这是 TransportComponent 的模板：

<tabset >
  <tab heading="Trucks">
    <truck [actualTransport]="actualTransport"></general>
  </tab>
  <tab heading="Bus">
    <bus [actualTransport]="actualTransport"></general>
  </tab>
 </tabset>

TruckComponent 看起来像这样：

   export class TruckComponent {

   @Input() actualTransport: Subject<any>;

   ngOnInit() {
    this.actualCourse.subscribe(
    (data) => {
        console.log(data) // in browser console truck value, is 
        present
        console.log(data.truck) // here is undefined
      }
    }
  }

在浏览器控制台中，卡车值未定义，但在对象数据中，所有字段都已填充。

【问题讨论】：

您在这里使用主题而不只是将@Input 与变量一起使用是否有原因？
@AJT_82 不，我只是想知道为什么会这样。
好的，那么我建议你只使用变量而不是主题 :)
@AJT_82 thx :)，如果您看到有 2 个组件，当我使用主题时，它会保留所有组件的所有修改，并在此对象中添加的数据或修改的数据下提供访问权限。跨度>

标签： angular undefined subscribe subject

【解决方案1】：

我相信问题就在这里，您在 TruckComponent 中使用了 OnInit 生命周期钩子，并且由于它是子组件，ngOninit() 在其父组件 TransportComponent 初始化时被触发。我建议您将ngOninit() 移动到您的父组件并在构造函数中使用TruckComponent 的actualCourse.subscribe 方法。希望对您有所帮助！

【讨论】：