单击 Angular 2 中的按钮时如何执行全屏窗口功能? [英] How to do FULL SCREEN WINDOW functionality while clicking the button in Angular 2?
问题描述
我已经为用户创建了登录页面.如果他们点击提交按钮,页面将导航到一个组件(test.component.ts,test.component.html,..).
I have created the login page for the user. If They click the submit button, the page will navigate to one component (test.component.ts,test.component.html,..).
我需要在全屏模式下制作该窗口.像,(html5 中的视频控制全屏).
I need to make that window in full screen mode. like, (video control full screen in html5).
submitLogin() {
if (this.userName === 'Student' && this.passWord === 'student@123'){
this.dashboard = true;
} else {
alert('Incorrect Username or Password');
}
}
我不知道如何实现全屏窗口功能.因为,我是 Angular2 的新手.谁能解决我的问题?.
I don't know how to achieve the full screen window functionality. Because, i am new to Angular2. Can Anyone solve my problem ?.
推荐答案
以下代码仅适用于较新版本的浏览器.从您的问题中,我确实分析过,单击按钮后会调用 submitLogin() .因此,单击按钮后,您可以使用以下方法实现全屏.
The following code will only be feasible for newer versions of browsers. From your question, I do analyze that, submitLogin() is called after clicking the button. So, after clicking the button, you can achieve full screen using the following approach.
submitLogin() {
this.toggleFullScreen();
if(this.userName == "Student" && this.passWord == "student@123"){
this.dashboard = true;
}
else{
alert("Incorrect Username or Password");
}
}
toggleFullScreen() {
let elem = document.body;
let methodToBeInvoked = elem.requestFullscreen ||
elem.webkitRequestFullScreen || elem['mozRequestFullscreen'] ||
elem['msRequestFullscreen'];
if(methodToBeInvoked) methodToBeInvoked.call(elem);
}
您可以前往以下链接阅读更多内容.文档
You can go to the following link to read more. Documentation
更新:ActiveXObject 仅在 IE 浏览器上可用.所以其他每个用户代理都会抛出错误.您可以使用以下代码:
Updated: ActiveXObject is available only on IE browser. So every other useragent will throw an error. You can use the following code:
toggleFullScreen() {
let elem = document.body;
let methodToBeInvoked = elem.requestFullscreen ||
elem.webkitRequestFullScreen || elem['mozRequestFullscreen']
||
elem['msRequestFullscreen'];
if(methodToBeInvoked) methodToBeInvoked.call(elem);
}
这篇关于单击 Angular 2 中的按钮时如何执行全屏窗口功能?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!