Как я могу получить данные из родительского компонента в дочерний компонент в Angular? - PullRequest
Новая
       7

Как я могу получить данные из родительского компонента в дочерний компонент в Angular?

0 голосов
/ 04 января 2019

Я только начал изучать Angular и очень новичок.Я использую Angular 7, и я хотел бы отправить данные из родительского компонента в дочерний компонент.Родительский компонент отправляет данные по async await.Я использовал это [carInfo]="data" в html родительского компонента и получал данные в дочернем компоненте, как показано ниже.Однако проблема в том, что я не могу получить данные.Если я поставлю console.log(this._railcarData) на ngOnInit(){} ответ окна консоли 'undefined', но если я поставлю его на set railcarData(){}, я смогу увидеть данные после завершения ngOnInit(){}.Я знаю, что это из-за асинхронности, но я не мог найти никакого решения для этого.Любое тело, позвольте мне помочь, что я изучаю больше и как я могу использовать данные для моего проекта? 

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

1 Ответ

0 голосов
/ 04 января 2019

Поскольку данные передаются в дочерний компонент асинхронно, вы можете использовать подписку

В 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 file // Необязательно, поскольку данные назначаются в самом вызове http 

constructor(private someHttpService: SomeService) {}

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