如何在Angular 4中使用预渲染使空闲超时/保持活动的ng2-idle工作。我按照以下链接进行实现
https://hackedbychinese.github.io/ng2-idle/
没有服务器预渲染它工作正常,但是当我将渲染添加回index.html时,我一直收到以下错误
异常:调用节点模块失败并显示错误:由于错误导致预渲染失败:ReferenceError:未在新DocumentInterruptSource中定义文档
ng2-idle是否适用于预渲染?是否有解决方法或任何其他方法来实现空闲超时警告并保持ping到Web服务器?
如果您想查看任何代码,请告诉我。它与链接完全相同,无需预渲染即可工作。
感谢您的时间
答案 0 :(得分:0)
这不起作用,因为服务器尝试在服务器上呈现客户端元素。这行不通。您必须告诉服务器他没有通过服务器渲染这些零件。
为此PLATFORM_ID
来自Angular cor。有了这个,您可以使用if来说“ 不要在服务器上执行此操作” ...
我的示例..我使用addlistener
创建了自己的自动注销。您可以看到我以If(isPlattformBrowser)
在ngoninit中启动零件,这意味着仅在浏览器上而不在服务器上。使用空闲功能,您必须在if(isPlattformBrowser)
创建一个组件并编写以下示例并添加
将您的组件自动注销添加到app.component.html
中,例如
<router-outlet name="header"></router-outlet>
<router-outlet></router-outlet>
<app-auto-logout></app-auto-logout>
(您组件的名称)以激活自动注销每个组件。首先加载app.component并在应用程序组件上加载其他Coponent负载, 这样您在app.component中制作的内容就可以在每个组件中使用。
import {Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core';
import {AuthService} from '../../../../services/auth.service';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
declare var $:any;
@Component({
selector: 'app-auto-logout',
templateUrl: './auto-logout.component.html',
styleUrls: ['./auto-logout.component.scss']
})
export class AutoLogoutComponent implements OnInit {
warnTimeout: any;
logoutTimeout: number;
// warn: number;
// logout
setState: string;
events = [
"load",
"mousemove",
"mousedown",
"click",
"scroll",
"keypress"
];
countdown: any;
interval: any;
// interval: number;
// @ViewChild('autologoutModal') nameField2: ElementRef;
constructor( private authService: AuthService,
@Inject(PLATFORM_ID) private platformId: Object) {
}
ngOnInit() {
if (isPlatformBrowser(this.platformId)) {
this.warn = this.warn.bind(this);
this.logout = this.logout.bind(this);
this.resetTimeout = this.resetTimeout.bind(this);
for (var i in this.events) {
window.addEventListener(this.events[i], this.resetTimeout);
console.log('Event regriestriert');
}
this.setTimeout();
}
this.countdown=15;
}
setTimeout() {
// this.warnTimeout = setTimeout(this.warn, 16 * 1000);
//wenn eine Minute keine Aktivität regristriert wird, wird di Warnung ausgelöst und in 15 Sekunden ausgeloggt
this.warnTimeout = setTimeout(this.warn, 600000);
// this.logoutTimeout = setTimeout(this.logout, 17);
}
resetTimeout() {
this.clearTimeout();
this.setTimeout();
// console.log('Im reset timeout');
}
warn() {
// alert("You will be logged out automatically in 1 minute.");
//intervall runterzählen bis zum tatsächlichen Logout
this.interval = setInterval(() => {
console.log(this.countdown);
this.countdown--;
//Warnung
if (isPlatformBrowser(this.platformId)) {
$('#autologoutModal').modal('show');
}
if (this.countdown=== 0 ) {
// code here will run when the counter reaches zero.
clearInterval(this.interval);
console.log('Ding!');
this.cancelsession();
}
}, 1000);// ein sekunde abstände wert von countdown ändern bzw. runterzählen
// this.logoutTimeout = setTimeout(this.logout, this.countdown);
}
logout() {
// Send a logout request to the API
console.log("Sending a logout request to the API...");
// this.setState({ logginStatus: false });
// this.destroy(); // Cleanup
}
destroy() {
this.clearTimeout();
for (var i in this.events) {
window.removeEventListener(this.events[i], this.resetTimeout);
}
}
//clear timeout and intervall, set countdown to initial value
clearTimeout() {
if (this.warnTimeout){ clearTimeout(this.warnTimeout), clearInterval(this.interval), this.countdown=15;}
if (this.logoutTimeout) clearTimeout(this.logoutTimeout);
}
countdownzahler() {
this.countdown--;
}
cancelsession(){
this.authService.logout().subscribe(data=>{
window.location.href = window.location.href.replace(window.location.pathname, '') + `/d/start/redirect?page=receiving&country=AT&dealer=`;
console.log('Ausloggen');
});
}
}