угловые нагрузки AppComponent после подкомпонента - PullRequest
Новая
       19

угловые нагрузки AppComponent после подкомпонента

0 голосов
/ 27 декабря 2018

Я загружаю данные в AppComponent

и затем обращаюсь к этим данным в people.component

Но people.component загружается первым.

AppComponent 

  ngOnInit() {
     pre: this.getPeople();
  }

  getPeople(): any {
     this.getDATA(this.URL)
       .subscribe(people => { 
           this.people = people,
           console.log(people[0]);
       });
  }

people.component 

ngOnInit() {
    pre: this.people = this.appData.people;
    this.getPeople();
 }

 getPeople(): any {
    console.log("people.component getPeople()");
 }

На консоли отобразится «people.component getPeople ()», прежде чем отобразится первый элемент массива people.

Итак, я не могу использовать массив people в компоненте people.

Есть какие-нибудь идеи о том, как заставить AppComponent работать до People.component?

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Я думаю, что appData - это зависимость, которую вы ввели в свой PeopleComponent для получения данных, которые AppComponent получает от какого-то REST API.Это общий сервис, который вы создали для передачи данных между AppComponent и PeopleComponent.Но у них есть отношения Parent-Child, вы можете просто передавать данные между ними, используя свойство @Input.Поэтому я не уверен, почему вы делаете это с помощью Shared Service.

Исходя из вашего OP, PeopleComponent является дочерним для AppComponent, поэтому вы можете просто передать people как@Input() свойство для PeopleComponent.

Просто добавьте это в app.component.html: 

...
<app-people [people]="people"></app-people>
...

А теперь определите свойство @Input в вашем PeopleComponent.Примерно так: 

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-people',
  templateUrl: './people.component.html',
  styleUrls: ['./people.component.css']
})
export class PeopleComponent implements OnInit {

  @Input() people: any;

  ngOnInit() {
    pre: this.people = this.people;
    this.getPeople();
  }

  getPeople(): any {
    console.log("people.component getPeople()");
  }

}

Вот вам Рабочий образец StackBlitz для вашей ссылки.

0 голосов
/ 27 декабря 2018

Если предположить, что PeopleComponent является дочерним элементом AppComponent и у него есть связанный шаблон, можно использовать асинхронный канал для передачи данных во входное свойство.

app.component.ts 

people$: Array<People>;

ngOnInit(): {
    this.people$ = this.getDATA(this.URL);
}

app.component.html 

<app-people *ngIf="people$ | async as people" [people]="people"></app-people>

people.component.ts 

@Input() people: Array<People>;

[...remaining code elided...]
...