Angular 如何从父组件获取数据到子组件？

Question

我刚开始学习Angular，非常初学者。我正在使用 Angular 7 并且我想将数据从父组件发送到子组件。父组件通过async await发送数据。我在父组件 html 中使用了这个 [carInfo]="data" 并且在子组件处接收数据，例如下面的代码。但是，问题是我无法获取数据。如果我把 console.log(this._railcarData) 放在 ngOnInit(){} 控制台 window 响应 'undefined' 但是如果我把它放在 set railcarData(){} 我可以在完成后看到数据 ngOnInit(){} .我知道这是因为异步，但我找不到任何解决方案。请任何人让我帮助我究竟研究更多以及如何将数据用于我的项目？

private _railcarData: RailcarModel[];
@Input() 
set railcarData(value: RailcarModel[]) {
    this._railcarData = value;
}
get railcarData() {
    return this._railcarData;
}

Answer 1

由于数据是异步传入子组件的，可以利用订阅

在some.service.ts

private _railcarData = new Subject<RailcarModel[]>();
_railcarData$ = this._railcarData.asObservable();

setRailCarData(data: RailcarModel[]) {
   this._railcarData.next(data);
}

// Async HTTP Call
fetchRailData(): Observable<any> {
    return this.http
      .get<any>('/api/someurl')
      .pipe(
        tap((data: any) => {   // You can set data here or in parentcomponent.ts
          this.setRailCarData(data); // Assigns value to subject
        })
    );
}

在childcomponent.ts文件中

railDataSubscription: Subscription;
constructor(private someHttpService: SomeService) {
    this.railDataSubscription = this.someHttpService._railcarData$.subscribe(
      raildata => {
        this.railcarData(raildata); // your set method
      }
    );
  }

ngOnDestroy() {
    this.railDataSubscription.unsubscribe();
}

在 parentcomponent.ts 文件中 // 可选，因为数据是在 http 调用本身中分配的

constructor(private someHttpService: SomeService) {}

// This line in async subscription
this.someHttpService.setRailCarData(railddata);

Angular 如何从父组件获取数据到子组件？

How can I get data from parent component to child component in Angular?

getter

setter

angular