Question

我有一个HTTP函数，只需要调用一次，所有子组件都依赖于这个函数。所以我从父组件调用此函数。

现在，在任何子组件的ngOnInit中进行任何调用之前，我需要检查父函数是否成功执行，否则等待父函数从http调用（服务器）获得响应：

父组件


儿童组件1

儿童组件2

儿童组件3

父组件调用服务功能
子组件必须等到执行父函数

父组件

main(): void {
    this.backendService.main().subscribe(res => {
        this.sharedDataService.setParentData(res);
        this.data = res;
    });
}

ngOnInit(): void {
    this.main();
}

子组件

child(): void {
    let parentData = this.sharedDataService.getParentData();
    this.backendService.child(parentData).subscribe(res => this.childData = res);
}

ngOnInit(): void {
    this.child();
}

backendService - 使http调用
sharedDataService - 具有跨所有组件共享的数据

但是，即使在this.backendService.main函数http调用收到响应之前，也会调用this.backendService.child函数。有没有办法实现这个目标？

Answer 1

因为您正在使用共享服务，所以如果您使用了observable，那么解决所有问题会更好：

// Parent component:

main(): void {
    this.backendService.main().subscribe(res => {
        this.sharedDataService.setParentData(res);
        this.data = res;
    });
}

// Child components:

ngOnInit(): void {
    this.sharedDataService.getParentData().subscribe(parentData => {
        this.backendService.child(parentData).subscribe(res => this.childData = res);
    });
}   

// Your shared service:

export class SharedDataService {

    private parentData: BehaviorSubject<any> = new BehaviorSubject({});    

    setParentData(data): void {
        this.parentData.next(data);
    }
    getParentData(): Observable<any> {
        return this.parentData.asObservable();
    }
}

Answer 2

您可以使用事件发射器，例如 https://toddmotto.com/component-events-event-emitter-output-angular-2

使用发射器可以发出事件并将任何类型的数据传递给任何其他组件。

仅在父组件中的函数完成后调用子组件中的函数

2 个答案: