如何在 Angular 中从父组件到子组件获取数据？答案

【问题标题】：How can I get data from parent component to child component in Angular?如何在 Angular 中从父组件到子组件获取数据？
【发布时间】：2019-01-03 23:27:41
【问题描述】：

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

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

【问题讨论】：

能把你父组件的html和ts代码加进去吗？
是的，我做到了。获取数据需要时间
但是不知道怎么获取和使用
由于您希望数据异步传递到子组件中，您可以在您的 service 文件中创建一个 observable，该文件返回 Observable<RailcarModel[]>，然后订阅子组件中的数据

标签： angular setter getter

【解决方案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);

【讨论】：