Angular 子组件后的组件载荷

我在AppComponent中加载数据

然后在people.component中引用此数据

但是人。首先加载组件

应用组件

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

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

人事部

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

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

控制台在显示人员数组的第一个元素之前显示“people.component getPeople（）”

因此，我无法在人员组件中利用人员数组

---

关于如何让AppComponent在people.component之前运行，有什么想法吗

假设PeopleComponent是AppComponent的子组件，并且它有一个关联的模板，可以使用异步管道将数据传递到输入属性中

app.component.ts

people$：数组；
ngOnInit（）：{
this.people$=this.getDATA（this.URL）；
}

app.component.html

people.component.ts

@Input（）人物：数组；
[…删除剩余代码…]

我认为您拥有的

appData

是一种依赖关系，您已将它注入到

PeopleComponent

中，以获取

AppComponent

从某个REST API获取的数据。这是一个共享服务，您创建它是为了在

AppComponent

和

PeopleComponent

之间传递数据。但是它们有父子关系，您可以使用

@Input

属性在它们之间传递数据。所以我不知道你为什么要使用共享服务

假设在您的OP中，

PeopleComponent

是

AppComponent

的子组件，那么您只需将

people

作为

@Input（）

属性传递给

PeopleComponent

只需在app.component.html中添加以下内容：

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

---

这是给你的裁判的一封信

---

我有个问题。你的代码中的

pre

是怎么回事？我以前从未见过类似的情况。我目前尝试将@Input添加到路由器模块中，但没有成功。如果我加上

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

@Input() people: Array<People>;

[...remaining code elided...]

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

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()");
  }

}