时间戳

首页 > 解决方案 > 如何从服务中调用组件（模态弹出窗口）？

angular - 如何从服务中调用组件（模态弹出窗口）？

问题描述

我想每 10 分钟显示一次会话超时弹出窗口。我将发布的时间放在服务文件中的会话存储中，并且从同一个文件中我正在启动计时器。我这样做的原因是在每次回复中我都会得到一个新的发布时间。所以我将发布时间从会话存储传递到弹出窗口。我在这里遇到的问题是我无法从该特定服务调用组件，原因是“服务中的循环依赖-> 组件-> 服务-> 组件”

这是我的服务文件

@Injectable({
providedIn: 'root'
})


export class HttpBaseService {

 constructor(public authHttp: HttpClient, private modal: MatDialog, 
private toastr: ToastrManager) { }

public handleAPIResponse(response: any) {

    if (response.accessToken) {
        const tokenInfo = 
this.getDecodedAccessToken(response.accessToken);
        const issuedTime = tokenInfo.exp;
        this.setToken(response.accessToken, issuedTime);
//Here I am starting the timer with latest  issued time.
          this.startTimer(issuedTime); 
    }
    return response.result;
 }
}

startTimer(issuedTime: number) {
///login to calculate time 
//call a modal popup here if time is up. 
this.modal.open(ModalPopupComponent, {

 }

 }

这是我的 ModalPopupComponent

@Component({
  selector: 'app-modal-popup',
  templateUrl: './modal-popup.component.html',
  styleUrls: ['./modal-popup.component.scss'],
})

export class ModalPopupComponent implements OnInit { 

//logic to show countdown of One min to logout automatically

}

需要知道如何在没有任何循环依赖的情况下从此服务调用模态组件。提前致谢

标签： angularservicecomponents

解决方案

您可以在组件中设置计时器，检查您在服务中的变量并像这样运行模态：

setInterval(() => { this.loading = true; this.getSignals(); }, 60000);

您可以在组件 ngOninit 中激活它 祝您好运！

推荐阅读