Question

我的页面包含两个部分，父级和子级。

在孩子中，我正在从服务器接收数据，并将此数据保存在服务中。我只想在服务中的数据不为null时在父级中执行一个函数，因为我正在父级函数中使用此数据。

在父级中执行功能之前，如何确定数据已在服务中？

我当然想在页面加载时尽快执行该函数，并且我不希望使用setTimeout函数。

例如：

//child
this.jsonService.getData().subscribe(res => {
  this.CommonService.userDetails = res;    
}

//service
@Injectable()
export class CommonService {
public userDetails: any;
}

//parent

// execute only when the this.CommonService.userDetails != null
doSomething(){ 
 alert(this.CommonService.userDetails)
}

Answer 1

修改后的答案： 如@jonrsharpe以及有关Component Interaction的文档所述，最好使用Subject而不是EventEmitter。

这是该服务的更新代码：

// Service
@Injectable()
export class CommonService {
    private userDetailsReceivedSource = new Subject<any>();

    userDetailsReceived$ = this.userDetailsReceivedSource.asObservable();

    private userDetailsData: any;

    receiveUserDetails(data: any) {
        this.userDetailsData = data;
        this.userDetailsReceivedSource.next(data);
    }
}

以下是使用receiveUserDetails的子组件的代码：

// Child
this.jsonService.getData().subscribe(res => {
    this.CommonService.receiveUserDetails(res);    
}

以下是使用userDetailsReceived$的父组件的更新代码：

// Parent
constructor() {
    this.CommonService.userDetailsReceived$.subscribe(_ => this.doSomething());
}

原始答案：

在服务中，您需要一个EventEmitter才能在数据可用时通知父组件。

当我们从子组件接收数据时，setter用于emit事件。

// Service
@Injectable()
export class CommonService {
    public onUserDetailsReceived = new EventEmitter<any>();

    private userDetailsData: any;

    public get userDetails(): any {
        return this.userDetailsData
    }

    public set userDetails(data: any) {
        this.userDetailsData = data;
        onUserDetailsReceived.emit();
    }
}

在父组件中，您必须订阅EventEmitter才能得到通知。

// Parent
constructor() {
    this.CommonService.onUserDetailsReceived.subscribe(_ => this.doSomething());
}

仅当特定元素不为空时才触发函数

1 个答案: