Angular 如何将来自后端的异步数据从子组件发送到父组件

我有两个组件。父匹配组件和子过滤器组件。我想将数据从子组件传递到父组件。如果我有静态属性，那么当我执行类似操作时，它会工作。3会被打印。 但是，如果我有一些subcribe方法，在那里我在子对象中获取数据，并且我尝试访问父组件中的数据，那么我在matches属性上就没有定义

//filter compo ts file

  test = 3;
    this.matchService.getMatches().subscribe(matches => {
      this.matches = matches['pageOfItems'];
    })

//match compo html

<app-filter #varName></app-filter>

// match compo ts file
@ViewChild('varName') someElement;

  ngAfterViewInit(): void {
    console.log(this.someElement.test);
    console.log(this.someElement.matches);
}

---

检查官方文档中的Output属性父事件侦听子事件部分

---

检查官方文档中的Output属性父事件侦听子事件部分

---

将数据从子组件发送到父组件的一种方法是使用和

基本示例如下所示：

@Component({
    selector: 'child-component',
    template: '<button (click)="onValueChanged(3)">Click me</button>'
})
class ChildComponent {
    @Output() public valueChanged = new EventEmitter<number>();

    onValueChanged(value: number) {
        this.valueChanged.emit(value);
    }
}

@Component({
    template: '<child-component (valueChanged)="onValueChanged($event)"></child-component>'
})
class ParentComponent {
    onValueChanged(value: number) {
        console.log('value from child =', value);
    }
}

---

请注意父级“订阅”模板中的值是如何更改的。您可以通过这种方式随时从子组件传递任何值。

从子组件向父组件发送数据的一种方法是使用和

基本示例如下所示：

@Component({
    selector: 'child-component',
    template: '<button (click)="onValueChanged(3)">Click me</button>'
})
class ChildComponent {
    @Output() public valueChanged = new EventEmitter<number>();

    onValueChanged(value: number) {
        this.valueChanged.emit(value);
    }
}

@Component({
    template: '<child-component (valueChanged)="onValueChanged($event)"></child-component>'
})
class ParentComponent {
    onValueChanged(value: number) {
        console.log('value from child =', value);
    }
}

请注意父级“订阅”模板中的值是如何更改的。您可以通过这种方式随时从子组件传递任何值。

由于matchService.getMatches是一个异步操作，因此在数据到达筛选器组件之前，您将无法使用该数据

正确的方法是使用@Output decorator see，它可以帮助您将带有负载的事件从子组件发送到父组件

然后，您可以从.subscribe函数调用内的子组件发出数据，或者在需要时发出数据。

由于matchService.getMatches是一个异步操作，因此在数据到达筛选器组件之前，您将无法使用该数据

正确的方法是使用@Output decorator see，它可以帮助您将带有负载的事件从子组件发送到父组件

---

然后，您可以从.subscribe函数调用内的子组件发出数据，或者在需要时发出数据。

子组件筛选器组件的this.matchService.getMatches是异步请求。在调用父组件的ngAfterViewInit之前，您永远无法确切地保证此异步任务将完成。因此，使用将您的子组件更新值发送给父组件。尝试在子组件上添加EventEmitter，并将数据发送到父组件。

this.matchService.getMatches子组件筛选器组件是异步请求。在调用父组件的ngAfterViewInit之前，您永远无法确切地保证此异步任务将完成。因此，使用将您的子组件更新值发送给父组件。尝试在子组件中添加EventEmitter，并将数据发送到父组件。

@Matyhn感谢您的回复。我可以用这种方式发送数据而不使用事件吗？例如，当我在子组件中用ngOnInit方法订阅并获取一些数据时？在组件之间发送数据的另一种方式是使用服务。但是，由于这是一个希望与父组件通信的子组件，我认为使用EventEmitter更合适。@Matyhn感谢您的回复。我可以不使用事件以这种方式发送数据吗，例如，当我在子组件中用ngOnInit方法订阅并获取一些数据时，在组件之间发送数据的另一种方法是使用服务。然而，由于这是一个希望与父组件通信的子组件，我认为使用EventEmitter更合适。