时间戳

首页 > 解决方案 > 仅当特定元素不为空时触发功能

angular - 仅当特定元素不为空时触发功能

问题描述

我的页面包含两个组件，父级和子级。

在孩子中，我从服务器接收数据，并将这些数据保存在服务中。只有当服务中的数据不为空时，我才想在父函数中执行一个函数，因为我在父函数中使用了这个数据。

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

当然，我想在页面加载时尽快执行该函数，并且我更喜欢不使用 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)
}

标签： angular

解决方案

编辑后的答案： 正如@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());
}

推荐阅读