Question

我刚刚开始学习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;
}

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中从父组件到子组件获取数据？

1 个答案: